/* conever Brand-Guide 12.06.2026: Primary #5139df · Pink #e277e8 · Lime #e6f88a
   Purple #8d50d3 · Slate #6c68ce · Gray #3a3a44 · BG-Dark #1e1d23 · Typo Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  color-scheme: dark;
  --bg: #1e1d23;
  --panel: #26252c;
  --panel-2: #2d2c35;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.18);
  --muted: #a3a1ad;
  --text: #f6f5fa;
  --dim: #c9c7d2;
  --brand: #5139df;
  --brand-2: #e277e8;
  --brand-strong: #4a34b7;
  --purple: #8d50d3;
  --slate: #6c68ce;
  --lime: #e6f88a;
  --green: #4dd8ba;
  --amber: #f4a261;
  --blue: #62c4ff;
  --max: 1180px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7fb;
  --panel: #ffffff;
  --panel-2: #efeef6;
  --line: rgba(30, 29, 35, 0.12);
  --line-strong: rgba(30, 29, 35, 0.2);
  --muted: #64626f;
  --text: #1e1d23;
  --dim: #3a3a44;
  --brand: #5139df;
  --brand-2: #b23bbd;
  --brand-strong: #4a34b7;
  --purple: #7a3fc0;
  --slate: #5a56b8;
  --lime: #9aac3a;
  --green: #0f9f8d;
  --amber: #c66a22;
  --blue: #0b75b7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  min-height: 100%;
  overflow-y: auto;
}

body {
  margin: 0;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hero-Atmosphäre: Produktions-Foto + Brand-Glows NUR im oberen Bereich.
   Scrollt mit der Seite weg und blendet in die Flächenfarbe aus, statt als
   fixes Bild hinter allen Sektionen durchzuscheinen (das wirkte fraktioniert).
   Nur auf der Startseite (body.home), nicht auf Sub-/Onepager. */
body.home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30, 29, 35, 0.55) 0%, rgba(30, 29, 35, 0.32) 40%, rgba(30, 29, 35, 0.24) 72%, rgba(30, 29, 35, 0.44) 100%),
    linear-gradient(180deg, rgba(30, 29, 35, 0.08) 0, rgba(30, 29, 35, 0.32) 55vh, rgba(30, 29, 35, 0.85) 84vh, var(--bg) 100%),
    radial-gradient(circle at 12% 26%, rgba(226, 119, 232, 0.18), transparent 30rem),
    radial-gradient(circle at 82% 16%, rgba(81, 57, 223, 0.16), transparent 36rem);
}

/* Bewegter Hero-Hintergrund (nur Dark-Theme, Startseite) — hinter den ::before-Gradients */
.hero-bg-video {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  pointer-events: none;
}
html[data-theme="light"] .hero-bg-video { display: none; }

html[data-theme="light"] body.home::before {
  background:
    linear-gradient(90deg, rgba(247, 247, 251, 0.68) 0%, rgba(247, 247, 251, 0.5) 42%, rgba(247, 247, 251, 0.4) 74%, rgba(247, 247, 251, 0.58) 100%),
    linear-gradient(180deg, rgba(247, 247, 251, 0.1) 0, rgba(247, 247, 251, 0.4) 55vh, rgba(247, 247, 251, 0.9) 84vh, var(--bg) 100%),
    radial-gradient(circle at 12% 26%, rgba(178, 59, 189, 0.09), transparent 30rem),
    radial-gradient(circle at 82% 16%, rgba(74, 52, 183, 0.1), transparent 36rem),
    url("screenshots/hero-bg-production-office-light.webp") center top / cover no-repeat;
}

img {
  display: block;
  max-width: 100%;
  height: auto; /* width/height-Attribute liefern nur das Seitenverhältnis (CLS), verzerren nicht */
}

.screenshot-light {
  display: none;
}

html[data-theme="light"] .screenshot-dark {
  display: none;
}

html[data-theme="light"] .screenshot-light {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 clamp(20px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(30, 29, 35, 0.82);
  backdrop-filter: blur(18px);
}

html[data-theme="light"] .site-header {
  background: rgba(247, 247, 251, 0.84);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;        /* zarte Wortmarke (CI: Mono bold, Wortmarke zart) */
  letter-spacing: 0.03em;
  font-size: 1.05rem;
}

.brand img {
  width: 28px;
  height: 28px;
}

/* Header/Footer-Monogramm: plain Mark, nimmt die Textfarbe (currentColor)
   — weiss auf dunkel, dunkel auf hell. Wie die App-Sidebar, aber theme-adaptiv. */
.brand-mark {
  display: inline-block;
  width: 47px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("brand/conever-mark.svg") center / contain no-repeat;
  mask: url("brand/conever-mark.svg") center / contain no-repeat;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-links a {
  transition: color 0.18s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  color: white !important;
  padding: 9px 14px;
  border: 1px solid rgba(81, 57, 223, 0.42);
  background: rgba(81, 57, 223, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-cta:hover {
  background: rgba(81, 57, 223, 0.32);
  border-color: rgba(81, 57, 223, 0.7);
  transform: translateY(-1px);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: rgba(81, 57, 223, 0.42);
}

.theme-icon {
  width: 18px;
  height: 18px;
}

.theme-icon-light {
  display: none;
}

html[data-theme="light"] .theme-icon-dark {
  display: none;
}

html[data-theme="light"] .theme-icon-light {
  display: block;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.72);
}

main > section {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  scroll-margin-top: 92px;
}

#top {
  scroll-margin-top: 92px;
}

main {
  overflow: visible;
}

.hero {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  padding: 76px 0 34px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand-2);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(2.01rem, 4.2vw, 4.26rem);
  font-weight: 800; /* Inter ExtraBold — Brand-Guide Typo H1 */
  line-height: 0.9;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.lead {
  max-width: 600px;
  color: var(--dim);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}

.hero-note {
  max-width: 560px;
  margin: 24px 0 0;
  padding: 14px 0 14px 18px;
  color: var(--muted);
  border-left: 2px solid var(--brand-2);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  font-weight: 760;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.primary {
  border-color: rgba(81, 57, 223, 0.72);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px rgba(74, 52, 183, 0.32);
}

.primary:hover {
  background: var(--brand-strong);
  border-color: rgba(81, 57, 223, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(74, 52, 183, 0.42);
}

.secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim);
}

.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-strong);
  color: var(--text);
}

html[data-theme="light"] .secondary {
  background: rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .secondary:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}

.hero-console {
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(13, 15, 22, 0.78);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

html[data-theme="light"] .hero-console {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.14);
}

.console-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 13px 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}

.hero-console img {
  width: 100%;
  height: clamp(360px, 46vw, 610px);
  max-width: none;
  object-fit: cover;
  object-position: left top;
}

.proof-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
  border: 1px solid var(--line);
  background: rgba(13, 15, 22, 0.7);
  backdrop-filter: blur(14px);
}

html[data-theme="light"] .proof-strip {
  background: rgba(255, 255, 255, 0.7);
}

.proof-strip span {
  position: relative;
  padding: 18px 20px 18px 36px;
  color: var(--dim);
  font-size: 0.88rem;
  font-weight: 600;
  border-right: 1px solid var(--line);
}

.proof-strip span::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 12px rgba(226, 119, 232, 0.5);
}

.proof-strip span:last-child {
  border-right: 0;
}

.problem,
.security {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  padding: 96px 0;
}

.problem p,
.security p,
.section-heading p,
.workflow p,
.budgeting-copy p,
.founder-band p,
.cta p {
  color: var(--dim);
  line-height: 1.65;
}

.section-heading {
  max-width: 760px;
  margin: 0 0 44px;
  text-align: left;
}

.section-heading.left {
  margin-left: 0;
  text-align: left;
}

.system-map,
.workflows,
.budgeting,
.proof,
.trust-band,
.founder-band,
.cta {
  padding: 96px 0;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.map-column {
  padding: 26px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px;
}

html[data-theme="light"] .map-column {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58)),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px) 0 0 / 28px 28px;
}

.map-column:last-child {
  border-right: 0;
}

.map-kicker {
  display: block;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.map-column h3 {
  margin-bottom: 24px;
  font-size: 1.65rem;
}

.map-column ul,
.security ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.map-column li {
  padding: 12px 0;
  color: var(--dim);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Modul-Kanten aus der Brand-Familie (Indigo → Purple → Pink → Slate)
   statt off-brand Grün/Blau — ein Farbverlauf, kein Kunterbunt. */
.finance {
  border-top: 3px solid var(--brand);
}

.people {
  border-top: 3px solid var(--purple);
}

.production {
  border-top: 3px solid var(--brand-2);
}

.personal {
  border-top: 3px solid var(--slate);
}

.workflow {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: center;
  padding: 54px 0;
}

.workflow.reverse .workflow-copy {
  order: 2;
}

.workflow.reverse figure {
  order: 1;
}

/* Step-Marker in derselben Label-Farbe wie die Eyebrows (Pink) —
   ein Label-System statt eigener grüner Farbe. Lime auf Hell wäre
   zu kontrastarm für kleinen Text. */
.step {
  display: block;
  margin-bottom: 18px;
  color: var(--brand-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

figure {
  margin: 0;
}

figure img,
.budgeting img {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

html[data-theme="light"] figure img,
html[data-theme="light"] .budgeting img {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}

.workflow figure,
.proof figure {
  position: relative;
}

.workflow figure::before,
.proof figure::before {
  content: attr(data-label);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 7px 9px;
  color: var(--dim);
  background: rgba(30, 29, 35, 0.78);
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .workflow figure::before,
html[data-theme="light"] .proof figure::before {
  background: rgba(255, 255, 255, 0.82);
}

figcaption {
  max-width: 640px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.budgeting {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(26px, 5vw, 70px);
  align-items: start;
}

.budgeting img {
  width: 100%;
}

.budgeting-notes {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: -34px;
  border: 1px solid var(--line);
  background: rgba(30, 29, 35, 0.86);
}

html[data-theme="light"] .budgeting-notes {
  background: rgba(255, 255, 255, 0.88);
}

.budgeting-notes span {
  padding: 15px;
  color: var(--dim);
  font-size: 0.88rem;
  border-right: 1px solid var(--line);
}

.budgeting-notes span:last-child {
  border-right: 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.trust-band {
  text-align: left;
}

.trust-band .eyebrow {
  margin-bottom: 28px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}

.trust-card {
  display: grid;
  gap: 12px;
  padding: 28px 26px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .trust-card {
  background: rgba(255, 255, 255, 0.7);
}

.trust-card:last-child {
  border-right: 0;
}

.trust-kicker {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust-card strong {
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.trust-card span:not(.trust-kicker) {
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.trust-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 4px;
  background: #12121a;
}

.founder-band {
  display: grid;
  grid-template-columns: 260px minmax(0, 740px);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
}

.founder-band img {
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(18%);
}

.security ul {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .security ul {
  background: rgba(255, 255, 255, 0.7);
}

.security li {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.security li:last-child {
  border-bottom: 0;
}

.security strong {
  color: var(--text);
}

.security span {
  color: var(--muted);
  line-height: 1.55;
}

.cta {
  max-width: 820px;
  text-align: left;
}

.cta h2 {
  margin-bottom: 22px;
}

.cta .button {
  margin-top: 22px;
}

html.theme-transitions body,
html.theme-transitions .site-header,
html.theme-transitions .hero-console,
html.theme-transitions .theme-toggle,
html.theme-transitions .proof-strip span,
html.theme-transitions .map-column,
html.theme-transitions .trust-card,
html.theme-transitions .budgeting-notes,
html.theme-transitions figure img,
html.theme-transitions .budgeting img {
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.footer {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 44px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 14px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-nav a {
  transition: color 0.18s ease;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-note {
  display: block;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-note a {
  color: var(--muted);
  text-decoration: underline;
}

.footer-note a:hover {
  color: var(--text);
}

.footer-copy {
  display: block;
  padding-top: 8px;
}

@media (max-width: 980px) {
  .hero,
  .problem,
  .security,
  .workflow,
  .budgeting,
  .proof-grid,
  .founder-band {
    grid-template-columns: 1fr;
  }

  .workflow.reverse .workflow-copy,
  .workflow.reverse figure,
  .budgeting-notes {
    grid-column: auto;
    order: initial;
  }

  .map-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .map-column:nth-child(2) {
    border-right: 0;
  }

  .map-column:nth-child(1),
  .map-column:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .proof-strip,
  .budgeting-notes,
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-card:nth-child(2) {
    border-right: 0;
  }

  .trust-card:nth-child(1),
  .trust-card:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .hero-console img {
    height: clamp(270px, 62vw, 470px);
  }
}

@media (max-width: 560px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nav-links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  main > section,
  .footer {
    width: min(100% - 28px, var(--max));
  }

  .hero {
    min-height: auto;
    padding-top: 58px;
  }

  h1 {
    font-size: clamp(1.44rem, 7.2vw, 2.64rem);
    line-height: 0.96;
  }

  h2 {
    font-size: clamp(1.65rem, 8vw, 2.6rem);
    line-height: 1.06;
  }

  h3 {
    font-size: clamp(1.2rem, 6.5vw, 1.8rem);
    line-height: 1.1;
  }

  .proof-strip,
  .map-grid,
  .budgeting-notes,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .proof-strip span,
  .map-column,
  .trust-card,
  .budgeting-notes span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-strip span:last-child,
  .trust-card:last-child,
  .budgeting-notes span:last-child {
    border-bottom: 0;
  }

  .map-column:nth-child(3) {
    border-bottom: 1px solid var(--line);
  }

  .security li {
    grid-template-columns: 1fr;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ----------------------------------------------------------
   Subpages (Impressum, Datenschutz, AGB, Roadmap, Funktionen)
   ---------------------------------------------------------- */

body.subpage {
  background:
    linear-gradient(180deg, rgba(30, 29, 35, 0) 0, rgba(30, 29, 35, 0.65) 380px, #1e1d23 900px),
    radial-gradient(circle at 12% 18%, rgba(226, 119, 232, 0.08), transparent 30rem),
    radial-gradient(circle at 88% 10%, rgba(81, 57, 223, 0.08), transparent 32rem),
    var(--bg);
}

html[data-theme="light"] body.subpage {
  background:
    linear-gradient(180deg, rgba(247, 247, 251, 0) 0, rgba(247, 247, 251, 0.7) 380px, #f7f7fb 900px),
    radial-gradient(circle at 12% 18%, rgba(178, 59, 189, 0.05), transparent 30rem),
    radial-gradient(circle at 88% 10%, rgba(74, 52, 183, 0.05), transparent 32rem),
    var(--bg);
}

.legal-page {
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  padding: 96px 0 80px;
}

.legal-page h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 14px;
}

.legal-page .legal-meta {
  display: block;
  margin-bottom: 48px;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-page section {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.legal-page section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.legal-page h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.legal-page h3 {
  margin: 22px 0 8px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.legal-page p {
  margin: 0 0 12px;
  color: var(--dim);
  font-size: 0.96rem;
  line-height: 1.65;
}

.legal-page ul {
  margin: 8px 0 16px;
  padding-left: 22px;
  color: var(--dim);
  font-size: 0.96rem;
  line-height: 1.6;
}

.legal-page ul li {
  margin-bottom: 6px;
}

.legal-page strong {
  color: var(--text);
}

.legal-page a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}

.legal-page a:hover {
  color: var(--brand-2);
}

.legal-note {
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid rgba(81, 57, 223, 0.32);
  background: rgba(81, 57, 223, 0.08);
}

html[data-theme="light"] .legal-note {
  background: rgba(81, 57, 223, 0.06);
}

.legal-aside {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Roadmap-/Detail-Pages */

.detail-page {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 96px 0 80px;
}

.detail-page > h1 {
  margin-bottom: 14px;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.95;
}

.detail-page > .lead {
  max-width: 720px;
  margin-bottom: 56px;
  color: var(--dim);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
}

.detail-section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.detail-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin-bottom: 18px;
}

.detail-section p {
  max-width: 760px;
  color: var(--dim);
  line-height: 1.65;
  margin-bottom: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-top: 32px;
  border: 1px solid var(--line);
}

.detail-card {
  display: grid;
  gap: 10px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .detail-card {
  background: rgba(255, 255, 255, 0.7);
}

.detail-card:last-child {
  border-right: 0;
}

.detail-card .kicker {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
}

.detail-card p {
  margin: 0;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.status-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  border: 1px solid var(--line);
}

.status-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.95rem;
}

.status-list li:last-child {
  border-bottom: 0;
}

.status-list .status {
  color: var(--text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-list .status-done { color: var(--green); }
.status-list .status-active { color: var(--brand); }
.status-list .status-planned { color: var(--muted); }

@media (max-width: 720px) {
  .legal-page {
    padding-top: 64px;
  }

  .status-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-card {
    border-right: 0;
  }
}


/* ── Brand-Moment: Designer-Lockup als Statement-Band ─────────
   Randloses Vollbreiten-Band, kantig wie der Rest der Seite (kein
   border-radius mehr). Bewusst dunkel — das weiße Lockup braucht den
   dunklen Grund —, sitzt aber jetzt auf ruhiger Fläche statt auf dem
   durchscheinenden Hero-Foto zu schweben. */
.brand-moment {
  display: grid;
  place-items: center;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(64px, 9vw, 120px);
  padding: clamp(72px, 11vw, 150px) clamp(24px, 6vw, 80px);
  background-color: #141119;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(81, 57, 223, 0.22) 0%, transparent 60%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.brand-moment img {
  width: min(560px, 82%);
  filter: drop-shadow(0 0 44px rgba(81, 57, 223, 0.4));
}

/* ============================================================
   AGENTUR-LAYER — Kreuzberg-Editorial über dem Finanz-Grundgerüst.
   Nur Startseite (body.home). Ergänzt/überschreibt gezielt, damit
   Sub- und Legal-Pages unberührt bleiben. Fügt Haltung hinzu, ohne
   die Seriosität des Grundlayouts anzutasten.
   ============================================================ */

/* Mono-Kicker & technische Labels — redaktioneller, weniger SaaS-glatt */
.home .eyebrow,
.home .map-kicker,
.home .trust-kicker,
.home .step,
.home .console-bar,
.home .workflow figure::before,
.home .proof figure::before {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

/* Ein Eyebrow-System für die ganze Startseite: Mono, Pink, mit
   vorangestelltem Marker-Strich. Einheitlich, da alle Headings jetzt
   linksbündig sind. */
.home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.home .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand-2);
}

/* Highlight: Schlüsselwörter als farbiger Akzent statt Marker-Balken —
   hoher Kontrast auf hellem Headline-Text. Lime auf Dunkel, Indigo auf
   Hell (Lime wäre auf hellem Grund zu kontrastarm). */
.home .hl {
  color: var(--lime);
}

html[data-theme="light"] .home .hl {
  color: var(--brand);
}

/* Ein Tick mehr Charakter für die Display-Headlines der Startseite */
.home h1 {
  letter-spacing: -0.025em;
}

.home h2 {
  letter-spacing: -0.02em;
}

/* ── Laufband unter dem Hero: Branchen-Vokabular in Bewegung ── */
.ticker {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 6px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--brand);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 13px 0;
  animation: ticker-scroll 46s linear infinite;
  will-change: transform;
}

.ticker-track span {
  position: relative;
  padding: 0 30px;
  color: #fff;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticker-track span::before {
  content: "◆";
  position: absolute;
  left: -4px;
  color: var(--lime);
  font-size: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Manifest-Band: Vollflächiges Neon-Statement ──
   Bewusster Bruch — knalliges Lime, dunkle Tinte. Der eine laute Moment
   auf einer sonst ruhigen, seriösen Seite. */
.manifesto {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: clamp(64px, 9vw, 120px) 0;
  padding: clamp(72px, 11vw, 150px) clamp(24px, 6vw, 80px);
  background-color: var(--lime);
  background-image:
    radial-gradient(circle at 88% 12%, rgba(0, 0, 0, 0.05), transparent 40%),
    radial-gradient(circle at 6% 90%, rgba(0, 0, 0, 0.06), transparent 42%);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
}

.manifesto p {
  max-width: 1080px;
  margin: 0 auto;
  color: #16160e;
  font-size: clamp(1.75rem, 4.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
}

.manifesto .ink-hl {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.08em;
  text-decoration-color: rgba(22, 22, 14, 0.35);
}

.manifesto .sig {
  display: block;
  max-width: 1080px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  color: rgba(22, 22, 14, 0.62);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Manifest bleibt in beiden Themes gleich laut — Lime ist der Anker */
html[data-theme="light"] .manifesto {
  background-color: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

@media (max-width: 560px) {
  .ticker-track span {
    font-size: 0.78rem;
    padding: 0 22px;
  }
}

/* Einzel-Screen in der „Aus der App"-Sektion — zentriert, ruhig */
.proof-grid.single {
  grid-template-columns: 1fr;
  max-width: 940px;
}