/* ============================================
   CREO DIGITAL: Design System
   Editorial confidence. Asymmetric rhythm. No AI slop.
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Tinted Neutrals (warm, not pure gray) */
  --ink: #1a1a1f;
  --ink-secondary: #52525a;
  --ink-tertiary: #8e8e96;
  --surface: #fefefe;
  --surface-dim: #f6f5f3;
  --surface-warm: #f0eee9;
  --border: #e8e6e1;
  --border-subtle: #f0eee9;

  /* Accent: one only, used deliberately */
  --accent: #2855db;
  --accent-hover: #1d44b8;
  --accent-subtle: rgba(40, 85, 219, 0.06);

  /* Matte palette: desaturated, editorial */
  --matte-sage: #c8d1c4;
  --matte-sage-bg: #eef1ec;
  --matte-sand: #d9cfc2;
  --matte-sand-bg: #f3efe9;
  --matte-slate: #b8bcc6;
  --matte-slate-bg: #ecedf1;
  --matte-rose: #d4b8b8;
  --matte-rose-bg: #f2ebe9;
  --matte-sky: #b3c5d4;
  --matte-sky-bg: #e9eff4;
  --matte-clay: #c9b9a8;
  --matte-clay-bg: #f0ebe4;
  --matte-lavender: #bdb5cb;
  --matte-lavender-bg: #eeeaf3;

  /* Semantic */
  --success: #1a7f4b;
  --error: #c43232;

  /* Typography */
  --font-display: 'Sentient', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing (4pt system) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --max-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
}

/* --- Font Face --- */
@font-face {
  font-family: 'Sentient';
  src: url('../assets/fonts/sentient/fonts/Sentient-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--ink); color: var(--surface); }

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

p {
  color: var(--ink-secondary);
  max-width: 58ch;
  line-height: 1.7;
}

.label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-space {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

/* --- Page Curtain --- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-curtain__logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--surface);
  letter-spacing: 0.04em;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-5) 0;
  transition: background-color var(--duration-slow) ease, padding var(--duration-slow) ease;
}

.navbar.scrolled {
  background: rgba(254, 254, 254, 0.9);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  padding: var(--space-3) 0;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;   /* nie zweizeilig ("Creo" / "Digital") */
  flex-shrink: 0;        /* eng wird zuerst der Abstand kleiner, nicht das Logo */
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2.5vw, var(--space-7));
  list-style: none;
}

.navbar__links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-secondary);
  text-decoration: none;
  white-space: nowrap; /* Umbruch-Fix: "Kostenlos testen" brach zweizeilig um */
  transition: color var(--duration-fast) ease;
}
.navbar__links a:hover { color: var(--ink); }

.navbar__cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--surface) !important;
  background: var(--ink);
  padding: var(--space-2) var(--space-5);
  border-radius: 6px;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-normal) ease;
}
.navbar__cta:active { transform: scale(0.97); }

/* Analytics als Top-Tier-Produkt in der Navigation: Akzentblau + Badge,
   deutlich vom übrigen Menü abgesetzt, aber ruhiger als der CTA-Button. */
.navbar__product {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.navbar__product:hover { color: var(--accent-hover) !important; }
.navbar__badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 2px 6px;
  border-radius: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .navbar__cta:hover { background: #2d2d34; color: var(--surface); }
}

/* Mobile Nav */
.navbar__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
}

.navbar__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  position: absolute;
  left: 5px;
  transition: transform var(--duration-slow) var(--ease-in-out), opacity var(--duration-normal) ease, top var(--duration-slow) var(--ease-in-out);
}
.navbar__toggle span:nth-child(1) { top: 4px; }
.navbar__toggle span:nth-child(2) { top: 11px; }
.navbar__toggle span:nth-child(3) { top: 18px; }
.navbar__toggle.active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.navbar__toggle.active span:nth-child(2) { opacity: 0; }
.navbar__toggle.active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .navbar__toggle { display: block; order: 3; margin-left: var(--space-4); }

  .navbar__links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-9) var(--space-6) var(--space-6);
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
  }
  .navbar__links.open { transform: translateX(0); }
  .navbar__links li { width: 100%; }
  .navbar__links a {
    display: block;
    padding: var(--space-4) 0;
    font-size: 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--border-subtle);
  }
  .navbar__cta { margin-top: var(--space-5); width: 100%; text-align: center; display: block; }

  .navbar__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) ease;
    z-index: -1;
  }
  .navbar__backdrop.visible { opacity: 1; pointer-events: auto; }

  /* Sprachwahl rechts an den Hamburger gruppieren. Spezifität absichtlich
     erhöht: die Basisregel .lang-switch{margin-left:16px} steht später in der
     Quelle und würde ein einfaches margin-left:auto sonst überschreiben. */
  .navbar__inner .lang-switch { margin-top: 0; margin-left: auto; order: 2; }
}

/* Language Switcher */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-4);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lang-switch__current {
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
}

.lang-switch__link {
  color: var(--ink-tertiary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  transition: color var(--duration-normal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__link:hover { color: var(--ink); }
}

/* ============================================
   HERO: Asymmetric, editorial, confident
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: var(--space-10) 0 var(--space-9);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
}

.hero__headline {
  grid-column: 1 / -1;
}

.hero__headline h1 {
  max-width: 14ch;
}

.hero__headline h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--matte-slate);
}

.hero__left p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  max-width: 44ch;
}

.hero__right {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  justify-self: end;
}

@media (max-width: 768px) {
  .hero {
    align-items: center;
    padding-top: var(--space-10);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero__right { justify-self: start; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }

.btn--primary { background: var(--ink); color: var(--surface); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #2d2d34; color: var(--surface); }
  .btn--ghost:hover { border-color: var(--ink); }
}

/* ============================================
   SERVICES: Bento grid, NOT 6 identical cards
   ============================================ */
.services {
  background: var(--surface-dim);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  align-items: end;
}

.services__header p {
  justify-self: end;
  text-align: right;
  max-width: 38ch;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: var(--space-3);
}

.bento__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--duration-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
  .bento__item:hover { border-color: var(--ink-tertiary); }
}

/* Bento layout: asymmetric, diverse sizes + matte colors */
.bento__item:nth-child(1) { grid-column: span 7; grid-row: span 1; background: var(--matte-sage-bg); border-color: var(--matte-sage); }
.bento__item:nth-child(2) { grid-column: span 5; grid-row: span 1; background: var(--matte-sand-bg); border-color: var(--matte-sand); }
.bento__item:nth-child(3) { grid-column: span 4; grid-row: span 1; background: var(--matte-slate-bg); border-color: var(--matte-slate); }
.bento__item:nth-child(4) { grid-column: span 4; grid-row: span 1; background: var(--matte-sky-bg); border-color: var(--matte-sky); }
.bento__item:nth-child(5) { grid-column: span 4; grid-row: span 1; background: var(--matte-rose-bg); border-color: var(--matte-rose); }
.bento__item:nth-child(6) { grid-column: span 5; grid-row: span 1; background: var(--matte-lavender-bg); border-color: var(--matte-lavender); }
.bento__item:nth-child(7) { grid-column: span 7; grid-row: span 1; background: var(--matte-clay-bg); border-color: var(--matte-clay); }

.bento__number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--border);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Number color matches card accent */
.bento__item:nth-child(1) .bento__number { color: var(--matte-sage); }
.bento__item:nth-child(2) .bento__number { color: var(--matte-sand); }
.bento__item:nth-child(3) .bento__number { color: var(--matte-slate); }
.bento__item:nth-child(4) .bento__number { color: var(--matte-sky); }
.bento__item:nth-child(5) .bento__number { color: var(--matte-rose); }
.bento__item:nth-child(6) .bento__number { color: var(--matte-lavender); }
.bento__item:nth-child(7) .bento__number { color: var(--matte-clay); }

.bento__content { margin-top: auto; }
.bento__content h3 { margin-bottom: var(--space-2); }
.bento__content p { font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 768px) {
  .services__header { grid-template-columns: 1fr; }
  .services__header p { justify-self: start; text-align: left; }

  .bento { grid-template-columns: 1fr; }
  .bento__item { grid-column: span 1 !important; }
}

/* ============================================
   PREIS: eine Zahl statt drei Kacheln
   ============================================
   Die drei Paketkacheln liefen auf dem Desktop horizontal gepinnt durch
   (GSAP ScrollTrigger).  Das ist mit ihnen entfallen: ein einzelner Kasten
   braucht keine Choreografie, und ein gepinnter Abschnitt haelt den Besucher
   nur auf dem Weg zum Kontakt auf. */
.preis { border-bottom: 1px solid var(--border); }

.preis__card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: clamp(var(--space-6), 5vw, var(--space-9)) var(--gutter);
}
.preis__card .label { display: block; margin-bottom: var(--space-4); }

.preis__titel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  margin: 0 auto var(--space-6);
  max-width: 20ch;
}

/* Die Zahl ist der Grund, warum dieser Abschnitt ueberhaupt steht: sie traegt
   entsprechend Gewicht, ohne wie ein Preisschild zu schreien. */
.preis__zahl {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  /* p { max-width: 58ch } greift auch hier; ohne auto-Rand klebt der Absatz
     links statt mittig, derselbe Fall wie in der Umfrage-Karte. */
  margin: 0 auto var(--space-4);
  text-wrap: balance;
}
.preis__zahl strong { font-weight: 600; white-space: nowrap; }

.preis__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin: 0 auto;
  max-width: 46ch;
  text-wrap: balance;
}

.preis__cta { margin-top: var(--space-7); }

/* ============================================
   WHY US: Horizontal layout with numbers, not icon cards
   ============================================ */
.why-us { border-bottom: 1px solid var(--border); }

.why-us__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  align-items: end;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.why-item {
  padding-top: var(--space-6);
  border-top: 2px solid var(--border);
}

.why-item:nth-child(1) { border-color: var(--matte-sage); }
.why-item:nth-child(2) { border-color: var(--matte-sky); }
.why-item:nth-child(3) { border-color: var(--matte-sand); }
.why-item:nth-child(4) { border-color: var(--matte-rose); }

.why-item__number {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-5);
}

.why-item:nth-child(1) .why-item__number { color: var(--matte-sage); }
.why-item:nth-child(2) .why-item__number { color: var(--matte-sky); }
.why-item:nth-child(3) .why-item__number { color: var(--matte-sand); }
.why-item:nth-child(4) .why-item__number { color: var(--matte-rose); }

.why-item h3 { margin-bottom: var(--space-3); }
.why-item p { font-size: 0.875rem; line-height: 1.65; }

@media (max-width: 768px) {
  .why-us__header { grid-template-columns: 1fr; }
  .why-us__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

@media (max-width: 480px) {
  .why-us__grid { grid-template-columns: 1fr; }
}

/* ============================================
   REFERENCES: Asymmetric project grid
   ============================================ */
.references { border-bottom: 1px solid var(--border); }

.references__header {
  margin-bottom: var(--space-9);
  max-width: 48ch;
}

.references__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: var(--space-5);
}

/* Large card spans full left column height */
.ref-card--large {
  grid-row: 1 / -1;
}

/* Cards */
.ref-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}

/* Reference card color accents */
.ref-card:nth-child(1) { background: var(--matte-sand-bg); border-color: var(--matte-sand); }
.ref-card:nth-child(2) { background: var(--matte-lavender-bg); border-color: var(--matte-lavender); }
.ref-card:nth-child(3) { background: var(--matte-slate-bg); border-color: var(--matte-slate); }
.ref-card:nth-child(4) { background: var(--matte-sage-bg); border-color: var(--matte-sage); }

.ref-card:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .ref-card:hover { border-color: var(--ink-tertiary); }
  .ref-card:hover .ref-card__link { color: var(--accent); }
}

.ref-card__type {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-5);
}

.ref-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.ref-card--large .ref-card__name {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ref-card__role {
  font-size: 0.875rem;
  color: var(--ink-secondary);
  margin-top: var(--space-1);
}

.ref-card__scope {
  list-style: none;
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ref-card__scope li {
  font-size: 0.75rem;
  color: var(--ink-secondary);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.ref-card__link {
  margin-top: var(--space-4);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-tertiary);
  transition: color 0.2s var(--ease-out);
}

@media (max-width: 768px) {
  .references__grid {
    grid-template-columns: 1fr;
  }

  .ref-card--large {
    grid-row: auto;
  }
}

/* ============================================
   ABOUT: Full-width editorial split
   ============================================ */
.about {
  background: var(--ink);
  color: var(--surface);
}

.about__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-9);
  align-items: center;
}

.about__image {
  aspect-ratio: 3 / 4;
  background: #2d2d34;
  border-radius: 8px;
  overflow: hidden;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__text .label { color: var(--ink-tertiary); margin-bottom: var(--space-5); display: block; }

.about__text h2 {
  color: var(--surface);
  margin-bottom: var(--space-6);
}

.about__text p {
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-4);
  font-size: 1rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .about__image { max-height: 320px; }
}

/* ============================================
   CONTACT: Asymmetric, editorial
   ============================================ */
.contact { border-bottom: 1px solid var(--border); }

.contact__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-9);
}

.contact__info .label { margin-bottom: var(--space-5); display: block; }
.contact__info h2 { margin-bottom: var(--space-4); }

.contact__info p {
  margin-bottom: var(--space-6);
  line-height: 1.8;
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
}
.contact__detail a {
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.contact__detail a:hover { color: var(--ink); }

/* Kontaktformular (ersetzt die frühere Kalender-Einbettung) */
.contact__form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-7);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-field { margin-bottom: var(--space-4); }

.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-field textarea { resize: vertical; min-height: 130px; }

/* Honigtopf: für Menschen unsichtbar, für Bots verführerisch. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--ink-secondary);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}
.form-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }

.form-message {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}
.form-message--success {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.form-message--error {
  background: color-mix(in srgb, var(--error) 8%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}

.contact__form .btn { width: 100%; justify-content: center; }

@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .form-row { grid-template-columns: 1fr; }
  .contact__form { padding: var(--space-6) var(--space-5); }
}

/* ============================================
   FOOTER: Minimal
   ============================================ */
.footer {
  padding: var(--space-7) 0 var(--space-6);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.footer__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.footer__links a {
  font-size: 0.825rem;
  color: var(--ink-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.footer__links a:hover { color: var(--ink); }

.footer__bottom {
  font-size: 0.75rem;
  color: var(--ink-tertiary);
}

@media (max-width: 768px) {
  .footer__inner { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 5000;
  width: 380px;
  max-width: calc(100% - var(--space-7));
  padding: var(--space-5);
  background: var(--ink);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: opacity var(--duration-slow) ease, transform var(--duration-slow) var(--ease-out);
}

.cookie-banner.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cookie-banner.hiding {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition-duration: 200ms;
}

.cookie-banner h4 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
}

.cookie-banner p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-4);
}

.cookie-banner a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
}

.cookie-banner__actions button {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-normal) ease;
}
.cookie-banner__actions button:active { transform: scale(0.97); }

.cookie-btn--accept { background: var(--surface); color: var(--ink); }
.cookie-btn--accept:hover { background: #f0f0f0; }

.cookie-btn--reject {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
.cookie-btn--reject:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-page {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  min-height: 100vh;
}
.legal-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-2); }
.legal-page .legal-updated { font-size: 0.8rem; color: var(--ink-tertiary); margin-bottom: var(--space-9); }
.legal-page h2 { font-size: 1.25rem; font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.legal-page h3 { font-size: 1.05rem; font-weight: 600; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.legal-page p { margin-bottom: var(--space-4); max-width: 68ch; }
.legal-page ul { margin: var(--space-2) 0 var(--space-4) var(--space-5); color: var(--ink-secondary); }
.legal-page li { margin-bottom: var(--space-1); font-size: 0.925rem; }
.legal-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================
   GSAP ANIMATION STATES
   ============================================ */
.hero-fade { opacity: 0; transform: translateY(16px); }
.fade-up { opacity: 0; transform: translateY(20px); }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
  .hero-fade, .fade-up { opacity: 1; transform: none; }
  .btn:hover, .btn:active { transform: none !important; }
  .page-curtain { display: none !important; }
}

/* ============================================
   UTILITY
   ============================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ============================================
   ANALYTICS PAGE (/analytics)
   ============================================ */

/* --- Trust strip --- */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-dim);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.trust-strip__item {
  font-size: 0.875rem;
  color: var(--ink-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.trust-strip__item strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
@media (max-width: 720px) {
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
}

/* --- Comparison table --- */
.compare { border-bottom: 1px solid var(--border); }
.compare__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare__table th,
.compare__table td {
  text-align: left;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare__table thead th {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
}
.compare__table thead th:nth-child(2) { color: var(--accent); }
.compare__table tbody th {
  font-weight: 500;
  color: var(--ink-secondary);
  width: 24%;
}
.compare__table td:nth-child(2) { background: var(--accent-subtle); }
.compare__table td strong { color: var(--ink); }
.compare__table tbody td { color: var(--ink-secondary); }

/* --- Mode cards (analytics pricing, no scroll-jacking) --- */
/* Die .package__*-Bausteine gehoerten urspruenglich zu den Paketkacheln der
   Startseite.  Die sind entfallen, diese Regeln nicht: analytics.html baut die
   Betriebsart-Kacheln (Beta / Cookieless / Vollstaendig) damit auf, kombiniert
   mit .mode.  Weggeloescht waeren dort Preis, Merkmalsliste und Knopf ohne
   jede Formatierung dagestanden. */
.package__top { margin-bottom: var(--space-6); }

.package__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-top: var(--space-2);
}

.package__price { margin-top: var(--space-4); }

.package__price .amount {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
}

.package__price .period {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-tertiary);
  margin-top: var(--space-1);
}

.package__features {
  list-style: none;
  flex: 1;
}

.package__features li {
  padding: var(--space-2) 0;
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.package__features li:last-child { border-bottom: none; }

.package__cta { margin-top: var(--space-6); }

.modes { background: var(--surface-dim); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.modes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: var(--space-6);
  max-width: 1160px;
}
.mode {
  border-radius: 16px;
  border: 1px solid var(--matte-sky);
  background: var(--matte-sky-bg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.mode .package__features { flex: 1; }
.mode--featured { background: var(--ink); border-color: var(--ink); }
.mode--featured .package__name,
.mode--featured .package__price .amount { color: var(--surface); }
.mode--featured .package__price .period { color: rgba(254, 254, 254, 0.6); }
.mode--featured .package__features li { color: rgba(254, 254, 254, 0.78); border-bottom-color: rgba(255, 255, 255, 0.1); }
.mode--featured .label { color: var(--matte-sky); }
.mode--featured .btn--primary { background: var(--surface); color: var(--ink); }
@media (max-width: 1040px) {
  .modes__grid { grid-template-columns: 1fr; max-width: 460px; }
}
/* Bezahlte Pakete gelten erst nach der Beta, darum sichtbar zurückgenommen.
   Dimmen über filter (nicht opacity): die .fade-up-Karten bekommen von GSAP
   inline opacity:1, das eine opacity-Regel überstimmen würde. */
.mode--soon { filter: grayscale(0.5) opacity(0.68); }
.mode--soon .label { color: var(--ink-tertiary); }
.package__later {
  display: inline-block; font-size: 0.9rem; font-weight: 500;
  color: var(--ink-tertiary); padding: var(--space-2) 0;
}
.mode--beta .package__badge {
  display: inline-block; margin-top: var(--space-2); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--matte-sky);
}

/* --- Snippet block --- */
.snippet { border-bottom: 1px solid var(--border); background: var(--surface-dim); }
.snippet__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}
.snippet__inner h2 { margin: var(--space-3) 0 var(--space-4); }
.snippet__inner p { color: var(--ink-secondary); max-width: 46ch; }
.snippet__inner code { font-size: 0.9em; }
.snippet__code {
  background: var(--ink);
  color: #e8e6e1;
  border-radius: 12px;
  padding: var(--space-6);
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
}
.snippet__code code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
@media (max-width: 900px) {
  .snippet__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --- FAQ --- */
.faq { border-bottom: 1px solid var(--border); }
.faq__list { max-width: 820px; }
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}
.faq__item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-tertiary);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq__item p {
  padding-bottom: var(--space-5);
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* --- Final CTA --- */
.final-cta__inner {
  background: var(--ink);
  border-radius: 16px;
  padding: clamp(var(--space-7), 7vw, var(--space-9));
  text-align: center;
}
.final-cta__inner h2 { color: var(--surface); margin-bottom: var(--space-4); }
.final-cta__inner h2 em { color: var(--matte-sky); }
.final-cta__inner p {
  color: rgba(254, 254, 254, 0.72);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
}
.final-cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.final-cta__inner .btn--primary { background: var(--surface); color: var(--ink); }
.final-cta__inner .btn--ghost { color: var(--surface); border-color: rgba(255, 255, 255, 0.25); }


/* --- Analytics-Branding (Produktseite /analytics) --- */
.navbar__logo--analytics em,
.footer__logo--analytics em {
  font-style: normal;
  color: var(--accent);
}

/* ============================================
   UMFRAGE: Ein-Klick-Umfrage, cookieless gezählt
   ============================================ */
.umfrage__card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: clamp(var(--space-6), 5vw, var(--space-9)) var(--gutter);
}
.umfrage__card .label { display: block; margin-bottom: var(--space-4); }
.umfrage__frage {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  margin: 0 auto var(--space-7);
  max-width: 26ch;
}
.umfrage__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* Ohne diese Zeile schlägt das [hidden]-Attribut fehl: ein explizites
   display:flex/​block überstimmt die UA-Regel [hidden]{display:none}. */
.umfrage__aktion[hidden],
.umfrage__ergebnis[hidden] { display: none; }
/* Beide Antworten bewusst GLEICH gewichtet: kein Nudge, die Zahl soll
   ehrlich bleiben (sie wird zur zitierbaren Statistik). */
.umfrage__btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  min-width: 190px;
  justify-content: center;
  font-size: 0.95rem;
}
@media (hover: hover) and (pointer: fine) {
  .umfrage__btn:hover { border-color: var(--accent); color: var(--accent); }
}
.umfrage__btn:disabled { opacity: 0.5; cursor: default; }

.umfrage__ergebnis { margin-top: var(--space-2); text-align: left; }
.umfrage__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.umfrage__balken {
  height: 14px;
  background: var(--surface-warm);
  border-radius: 999px;
  overflow: hidden;
}
.umfrage__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 900ms var(--ease-out);
}
.umfrage__balken--ja .umfrage__fill { background: var(--accent); }
.umfrage__balken--nein .umfrage__fill { background: var(--matte-slate); }
.umfrage__wert {
  font-size: 0.85rem;
  color: var(--ink-secondary);
  white-space: nowrap;
  min-width: 5.5rem;
}
.umfrage__wert strong { font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.umfrage__zeile--eigen .umfrage__wert strong { color: var(--accent); }
.umfrage__meta {
  font-size: 0.8rem;
  color: var(--ink-tertiary);
  margin-top: var(--space-5);
  text-align: center;
}
.umfrage__bridge {
  /* Die globale Regel p { max-width: 58ch } verengt diesen Absatz auf rund
     555px in einer 758px breiten Karte.  Ohne auto-Rand klebte er damit LINKS:
     der Text war zwar in seinem Kasten zentriert, der Kasten aber nicht in der
     Karte, und der Trennstrich darueber sass sichtbar aus der Mitte.
     text-wrap: balance verteilt die Zeilen gleichmaessig, statt eine kurze
     Restzeile stehen zu lassen. */
  margin: var(--space-7) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-secondary);
  text-wrap: balance;
}
.umfrage__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .umfrage__link:hover { text-decoration: underline; }
}

/* ============================================
   NAV-DROPDOWN: „Für Entwickler" / Labs
   ============================================ */
.navbar__dd { position: relative; }
/* Hover-Brücke: der Spalt zwischen Auslöser und Menü lag SONST außerhalb des
   :hover-Ziels. Beim Herunterfahren der Maus klappte das Menü zu, bevor man
   klicken konnte („das Menü fehlt"). Das Pseudo-Element überbrückt den Spalt. */
.navbar__dd::before { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 12px; }
.navbar__ddtoggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
/* Pfeil als echter Chevron statt „▾" in 0.65em: der Glyph war ein kaum
   sichtbarer Punkt, niemand hat ihm ein Menü zugetraut. */
.navbar__ddcaret {
  font-size: 0; line-height: 0; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transform-origin: 50% 50%;
  transition: transform var(--duration-normal) var(--ease-out), margin var(--duration-normal) var(--ease-out);
}
.navbar__ddmenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
  min-width: 250px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(26, 26, 31, 0.10);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
  z-index: 60;
}
/* Offen per Hover oder per JS-Klasse .open (Klick/Enter). KEIN :focus-within:
   ein Anker behält nach dem Mausklick den Fokus, das Menü ließe sich dann
   weder per Klick noch per Escape schließen (Review-Fund). */
.navbar__dd:hover .navbar__ddmenu,
.navbar__dd.open .navbar__ddmenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.navbar__dd:hover .navbar__ddcaret,
.navbar__dd.open .navbar__ddcaret { transform: rotate(225deg); margin-top: 3px; }
.navbar__ddmenu li { margin: 0; }
.navbar__ddmenu a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink-secondary); line-height: 1.35; }
.navbar__ddmenu a:hover { background: var(--surface-warm); color: var(--ink); }
.navbar__ddhint { display: block; font-size: 0.76rem; color: var(--ink-tertiary); }
.navbar__ddall { font-size: 0.82rem; color: var(--accent); }

/* Mobile: Untermenü als eingerückte Liste, sichtbar sobald das Menü offen ist.
   Die Unterpunkte erben NICHT die großen Zeilen mit Trennlinie der Hauptpunkte. */
@media (max-width: 1024px) {
  .navbar__dd::before { display: none; }
  .navbar__ddmenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 6px 14px;
    background: transparent; border: none; box-shadow: none;
  }
  .navbar__links .navbar__ddmenu a { padding: 8px 0; font-size: 0.92rem; color: var(--ink-secondary); border-bottom: none; }
  .navbar__ddcaret, .navbar__ddhint { display: none; }
}

/* ============================================
   FÜR ENTWICKLER: Hub
   ============================================ */
.dev-grid {
  display: grid; gap: 20px; margin-top: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.dev-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  transition: border-color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) ease;
}
.dev-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26,26,31,0.08); }
.dev-card__media { height: 160px; position: relative; overflow: hidden; display: grid; place-items: center; }
.dev-card__media--glass {
  background: #0b0b1a;
  background-image:
    radial-gradient(40% 60% at 25% 30%, rgba(255,61,138,.75), transparent 70%),
    radial-gradient(45% 55% at 75% 40%, rgba(124,58,237,.7), transparent 70%),
    radial-gradient(35% 45% at 55% 75%, rgba(0,229,255,.6), transparent 70%);
}
.dev-card__glasschip {
  width: 116px; height: 74px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(3px) saturate(1.5); backdrop-filter: blur(3px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 30px rgba(0,0,0,.4);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .12em; color: rgba(255,255,255,.85);
}
.dev-card__media--accent { background: linear-gradient(135deg, var(--accent), #4d82ff); }
.dev-card__media--soft { background: var(--surface-warm); }
.dev-card__media .big { font-family: var(--font-display); font-weight: 600; color: rgba(255,255,255,.92); font-size: 2rem; letter-spacing: -.02em; }
.dev-card__media--soft .big { color: var(--ink-tertiary); }
.dev-card__body { padding: var(--space-5); }
.dev-card__tag { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-tertiary); }
.dev-card__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 6px 0 6px; }
.dev-card__desc { font-size: .95rem; line-height: 1.55; color: var(--ink-secondary); }
.dev-card__link { margin-top: 14px; display: inline-block; font-size: .9rem; font-weight: 600; color: var(--accent); }
.dev-card--soon { opacity: .7; }
.dev-lead { max-width: 40ch; }

/* ── Session-Replay: animierte Demo ── */
.replay-stage { margin-top: var(--space-8); display: grid; justify-items: center; }
.replay-browser {
  width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(26,26,31,.10), 0 4px 14px rgba(26,26,31,.06);
}
.replay-chrome {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface-warm); border-bottom: 1px solid var(--border);
}
.replay-dot { width: 10px; height: 10px; border-radius: 50%; background: #d5d2cb; }
.replay-dot:nth-child(1){ background:#e0837c; } .replay-dot:nth-child(2){ background:#e3c07a; } .replay-dot:nth-child(3){ background:#8fc7a0; }
.replay-url {
  flex: 1; margin-left: 6px; padding: 5px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-body); font-size: .74rem; color: var(--ink-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-rec { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--error); }
.replay-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--error); animation: rpRec 1.4s ease-in-out infinite; }
.replay-viewport { position: relative; height: 300px; padding: 26px; overflow: hidden; background: var(--surface); }
.replay-viewport > .rp-skel, .replay-viewport > .rp-field, .replay-viewport > .rp-btn { animation: rpScroll 9s ease-in-out infinite; }
.rp-skel { height: 12px; border-radius: 6px; background: var(--surface-warm); margin-bottom: 14px; }
.rp-h1 { height: 22px; width: 62%; background: var(--surface-dim); }
.rp-line { width: 100%; } .rp-short { width: 74%; margin-bottom: 26px; }
.rp-field { display: grid; gap: 6px; margin-bottom: 16px; }
.rp-flabel { font-size: .72rem; color: var(--ink-tertiary); }
.rp-input {
  height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; padding: 0 12px; overflow: hidden;
  font-size: .85rem; letter-spacing: .12em; color: var(--ink-secondary);
}
.rp-mask { color: var(--ink-tertiary); }
.rp-typed { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent); animation: rpType 9s steps(1,end) infinite; }
.rp-typed::after { content: '••••••••'; }
.rp-btn {
  margin-top: 4px; display: inline-block; padding: 10px 22px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(40,85,219,.28); animation: rpScroll 9s ease-in-out infinite, rpBtn 9s ease-in-out infinite;
}
.rp-cursor {
  position: absolute; left: 30%; top: 52%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: rgba(40,85,219,.55); box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(40,85,219,.4);
  pointer-events: none; z-index: 3; animation: rpCursor 9s ease-in-out infinite;
}
.replay-bar { height: 4px; background: var(--surface-warm); }
.replay-bar__fill { display: block; height: 100%; width: 0; background: var(--accent); animation: rpBar 9s linear infinite; }
.replay-note { margin-top: var(--space-4); max-width: 52ch; text-align: center; font-size: .86rem; color: var(--ink-tertiary); }

@keyframes rpRec { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes rpBar { 0%{ width:0; } 96%,100%{ width:100%; } }
@keyframes rpType { 0%,14%{ max-width:0; } 40%,100%{ max-width:9ch; } }
@keyframes rpScroll { 0%,45%{ transform: translateY(0); } 60%,88%{ transform: translateY(-40px); } 100%{ transform: translateY(0); } }
@keyframes rpBtn { 0%,78%,100%{ box-shadow:0 4px 12px rgba(40,85,219,.28); filter:none; } 84%{ box-shadow:0 2px 6px rgba(40,85,219,.5); filter:brightness(.92); } }
@keyframes rpCursor {
  0%   { left:18%; top:30%; }
  16%  { left:30%; top:53%; }              /* zum Namensfeld */
  40%  { left:30%; top:53%; }              /* tippt */
  70%  { left:26%; top:82%; }              /* zum Button (Seite ist hochgescrollt) */
  82%  { left:26%; top:82%; transform: scale(1); }
  85%  { transform: scale(.7); }           /* Klick */
  90%  { left:26%; top:82%; transform: scale(1); }
  100% { left:18%; top:30%; }
}
@media (prefers-reduced-motion: reduce) {
  .replay-viewport > *, .rp-cursor, .rp-typed, .replay-bar__fill, .replay-rec i, .rp-btn { animation: none !important; }
  .rp-typed { max-width: 9ch; } .replay-bar__fill { width: 62%; }
}

/* ── Ohne / Mit Cookies ── */
.cookiesplit { margin-top: var(--space-8); display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 760px){ .cookiesplit { grid-template-columns: 1fr; } }
.cookiesplit__col { padding: var(--space-6); border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.cookiesplit__col--plus { border-color: rgba(40,85,219,.28); background: var(--accent-subtle); }
.cookiesplit__tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.cookiesplit__tag--free { background: var(--matte-sage-bg); color: var(--success); }
.cookiesplit__tag--plus { background: var(--accent); color: #fff; }
.cookiesplit__sub { margin: 10px 0 14px; font-size: .9rem; color: var(--ink-secondary); }
.cookiesplit__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cookiesplit__list li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink); line-height: 1.5; }
.cookiesplit__list li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; background: var(--matte-sage-bg); color: var(--success);
}
.cookiesplit__col--plus .cookiesplit__list li::before { background: rgba(40,85,219,.14); color: var(--accent); }

/* ============================================
   WISSEN: Wissens-, Vergleichs- und Zielgruppenseiten
   ============================================
   Ein Layout fuer alle Unterseiten, damit die Schreibenden nicht jede Seite
   anders bauen.  Aufbau von oben nach unten: Brotkrumen, Kopf mit Datum,
   "Kurz gesagt" (die direkte Antwort, die eine Antwortmaschine zitieren soll),
   Faktentabelle (zitierbare Zahlen), Fliesstext mit Fragen als H2, Vergleichs-
   tabelle, FAQ, Abschluss-CTA.  Alles auf einer Lesespalte. */
.wissen { padding-top: calc(var(--space-9) + 24px); padding-bottom: var(--space-9); }
.wissen__spalte { max-width: 760px; margin: 0 auto; }

.wissen__krumen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: 0.8rem; color: var(--ink-tertiary); margin-bottom: var(--space-6);
}
.wissen__krumen a { color: var(--ink-secondary); text-decoration: none; }
.wissen__krumen a:hover { color: var(--accent); }
.wissen__krumen li { list-style: none; }
.wissen__krumen li + li::before { content: '/'; margin-right: var(--space-2); color: var(--border); }

.wissen__kopf .label { display: block; margin-bottom: var(--space-3); }
.wissen__kopf h1 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.1;
  font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.wissen__stand { font-size: 0.8rem; color: var(--ink-tertiary); margin-bottom: var(--space-7); }
.wissen__stand time { font-variant-numeric: tabular-nums; }

/* Die direkte Antwort.  Nicht als Kasten "verstecken": Antwortmaschinen lesen
   den ersten Absatz nach der H1, und der soll die Frage in <= 50 Woertern
   beantworten. */
.wissen__kurz {
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  padding: var(--space-5) var(--space-6);
  border-radius: 0 12px 12px 0;
  margin-bottom: var(--space-8);
}
.wissen__kurz .label { display: block; margin-bottom: var(--space-2); }
.wissen__kurz p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink); max-width: none; }

.wissen__text h2 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.2;
  font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--space-9) 0 var(--space-4);
  text-wrap: balance;
}
.wissen__text h2:first-child { margin-top: 0; }
.wissen__text h3 { font-size: 1.1rem; font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
.wissen__text p { max-width: 68ch; margin-bottom: var(--space-4); line-height: 1.7; color: var(--ink-secondary); }
.wissen__text p strong { color: var(--ink); }
.wissen__text ul, .wissen__text ol { margin: 0 0 var(--space-5) var(--space-5); color: var(--ink-secondary); }
.wissen__text li { margin-bottom: var(--space-2); line-height: 1.6; }
.wissen__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.wissen__text code { font-size: 0.9em; background: var(--surface-dim); padding: 2px 6px; border-radius: 4px; }
.wissen__text blockquote {
  margin: var(--space-6) 0; padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--border); color: var(--ink);
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5;
}

/* Faktentabelle: kurze Zeilen, Zahl rechts.  Was hier steht, muss stimmen:
   genau diese Zeilen landen wortwoertlich in KI-Antworten. */
.wissen__fakten {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--space-8);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  font-size: 0.95rem;
}
.wissen__fakten th, .wissen__fakten td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.wissen__fakten th { width: 42%; color: var(--ink-secondary); font-weight: 500; background: var(--surface-dim); }
.wissen__fakten td { color: var(--ink); }
.wissen__fakten tr + tr th, .wissen__fakten tr + tr td { border-top: 1px solid var(--border-subtle); }

/* Vergleichstabelle: ja/nein muss auf einen Blick lesbar sein. */
.wissen__tabelle-huelle { overflow-x: auto; margin: 0 0 var(--space-8); -webkit-overflow-scrolling: touch; }
.wissen__vergleich { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.92rem; }
.wissen__vergleich th, .wissen__vergleich td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.wissen__vergleich thead th { font-weight: 600; color: var(--ink); background: var(--surface-dim); border-bottom: 1px solid var(--border); }
.wissen__vergleich tbody th { font-weight: 500; color: var(--ink-secondary); width: 34%; }
.wissen__vergleich td { color: var(--ink); }
.wissen__vergleich .ja   { color: #1a7f4b; font-weight: 600; }
.wissen__vergleich .nein { color: #c43232; font-weight: 600; }
.wissen__vergleich .teils { color: #a06a12; font-weight: 600; }
.wissen__vergleich td small { display: block; font-weight: 400; color: var(--ink-tertiary); font-size: 0.8rem; margin-top: 2px; }

/* Verweise auf verwandte Seiten */
.wissen__weiter { margin: var(--space-9) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--border); }
.wissen__weiter .label { display: block; margin-bottom: var(--space-3); }
.wissen__weiter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wissen__weiter a { color: var(--ink); text-decoration: none; font-weight: 500; }
.wissen__weiter a:hover { color: var(--accent); }
.wissen__weiter a span { display: block; font-weight: 400; color: var(--ink-tertiary); font-size: 0.85rem; }

/* Die FAQ der Unterseiten nutzt .faq__list / .faq__item der Startseite. */
.wissen .faq { padding: 0; margin-top: var(--space-9); }
.wissen .faq h2 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.2;
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 var(--space-4);
}
.wissen .faq__list { margin-top: var(--space-4); }

/* Hub-Seite: Karten je Unterseite */
.wissen__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.wissen__karte {
  display: block; padding: var(--space-5); border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease-out);
}
.wissen__karte:hover { border-color: var(--accent); }
/* Die Karten liegen im Hub innerhalb von .wissen__text, dessen Link-Regel
   (Akzentfarbe, Unterstreichung) sonst gewinnt.  Spezifischer, damit die
   Karte wie eine Karte aussieht und nicht wie ein Fliesstext-Link. */
.wissen__text .wissen__karte { color: var(--ink); text-decoration: none; }
.wissen__text .wissen__karte:hover { color: var(--ink); }
.wissen__karte .label { display: block; margin-bottom: var(--space-2); }
.wissen__karte h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 var(--space-2); line-height: 1.25; }
.wissen__karte p { margin: 0; color: var(--ink-secondary); font-size: 0.92rem; line-height: 1.55; max-width: none; }

@media (max-width: 640px) {
  .wissen { padding-top: calc(var(--space-8) + 24px); }
  .wissen__kurz { padding: var(--space-4) var(--space-5); }
  .wissen__fakten th { width: 48%; }
}