/* ==========================================================================
   52keys — Design-System (v4)
   Modern, kreativ, mit Charakter: kräftige Farben statt gedeckter
   Erdtöne, ein wiederkehrendes „Keycap"-Formenmotiv (angelehnt an die
   52 Tasten im Namen) als sinnvolles Gestaltungselement statt
   beliebiger Deko. Weiterhin: starke Typografie, echte
   Arbeitsmaterial-Mockups statt abstrakter Illustrationen oder Stockfotos.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 350 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 380 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Offizielle Unternehmensfarben. --brand (Markenblau, color-1) ist die
     bewusst gewählte Hauptfarbe: trägt Buttons, Fokus, Favicon-Klecks und
     alle primären Interaktionsflächen. Die übrigen Töne sind Akzente. */
  --color-1: #0a3585;
  --color-2: #0eb9a5;
  --color-3: #f7ca59;
  --color-4: #fba35b;
  --color-5: #0e214e;

  --brand: var(--color-1);
  --brand-deep: #082868;
  --brand-tint: #e1e9f9;

  /* Kühles, leicht blau getöntes Off-White statt reinem Grau — passt zum
     Markenblau. Jeder Akzent kommt in zwei Stufen: die kräftige Variante für
     Flächen, Formen und Icons; die „-deep"-Variante für Text/kleine
     UI-Elemente, damit die Lesbarkeit (WCAG AA) erhalten bleibt. */
  --ink: var(--color-5);
  --ink-soft: #52608a;
  --paper: #f7f9fc;
  --paper-alt: #eef2fa;
  --line: #dce3f2;
  --line-strong: #b9c5e0;

  --accent: var(--brand);
  --accent-deep: var(--brand-deep);
  --accent-tint: var(--brand-tint);

  --accent-2: var(--color-2);
  --accent-2-deep: #0a6d63;
  --accent-2-tint: #d7f5f1;

  --accent-3: var(--color-4);
  --accent-3-deep: #a35519;
  --accent-3-tint: #ffead4;

  --accent-4: var(--color-3);
  --accent-4-deep: #a67815;
  --accent-4-tint: #fff3d6;

  --ok: #166945;
  --ok-tint: #dcf5e8;
  --status-dot: #22c55e;

  --note-bg: #eef2fa;
  --note-border: #d7deef;

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 68rem;
  --container-narrow: 42rem;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --shadow-s: 0 1px 2px rgba(10, 20, 45, 0.08);
  --shadow-mockup: 0 24px 60px -24px rgba(10, 20, 45, 0.32);

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.75rem;
  --space-6: 6rem;
  --space-7: 8rem;
}

/* -------------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

body {
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 530;
  line-height: 1.14;
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 1.55rem + 2.9vw, 4rem); font-weight: 550; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); font-family: var(--font-text); font-weight: 680; }
h4 { font-size: 1.05rem; font-family: var(--font-text); font-weight: 680; }

p { text-wrap: pretty; }
.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 38rem;
}

a.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  font-weight: 600;
}
a.link:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -3rem; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.7em 1.1em;
  border-radius: var(--radius-s); transition: top 0.15s ease;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2.5px solid var(--accent-deep); outline-offset: 3px; }

/* ------------------------------------------------------------------ Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw + 0.5rem, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-4); }
.section--alt { background: var(--paper-alt); }
.section--bordered { border-top: 1px solid var(--line); }

/* Auf Mobile stapeln sich viele Sections direkt übereinander; die volle
   Desktop-Vertikalpause (var(--space-6) = 6rem oben UND unten) summiert
   sich dort schnell zu 150–200px reinem Leerraum zwischen zwei Textblöcken
   und lässt die Seite wie eine endlose Kette wirken. Auf kleinen Screens
   spürbar, aber nicht sparsam, reduzieren. */
@media (max-width: 640px) {
  .section { padding-block: var(--space-5); }
}

.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-5); }

.kicker {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--accent-deep);
}
.kicker::before {
  content: ""; width: 0.6em; height: 0.6em; flex: none;
  background: var(--accent); border-radius: 3px;
}

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.brand {
  font-family: var(--font-display); font-weight: 620; font-size: 1.25rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}

.site-header__brand-group { display: flex; align-items: center; gap: var(--space-3); }

.main-nav { display: flex; align-items: center; gap: var(--space-4); }
.main-nav__links { display: flex; gap: var(--space-3); }
.main-nav__links a {
  text-decoration: none; font-weight: 560; font-size: 0.96rem;
  color: var(--ink-soft); padding-block: 0.25rem; position: relative;
}
.main-nav__links a:hover, .main-nav__links a[aria-current="page"] { color: var(--ink); }
.main-nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent-deep);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-weight: 640; font-size: 0.97rem; border-radius: var(--radius-m);
  padding: 0.75em 1.35em; text-decoration: none; border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease;
  max-width: 100%; text-wrap: balance; text-align: center;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10, 20, 45, 0.45); }
.btn--primary:active { transform: translateY(0); }
.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--outline:active { transform: translateY(0); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* --------------------------------------------------------- Status-Pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.78rem; font-weight: 650; color: var(--ok);
  background: var(--ok-tint); border: 1px solid #bfe3cf;
  padding: 0.4em 0.75em 0.4em 0.6em; border-radius: 999px; white-space: nowrap;
}
.status-pill__dot { position: relative; width: 0.55rem; height: 0.55rem; flex: none; }
.status-pill__dot::before, .status-pill__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--status-dot);
}
.status-pill__dot::before { animation: status-blink 2.2s ease-in-out infinite; }
.status-pill__dot::after { animation: status-pulse 2.2s ease-out infinite; }
@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes status-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}
/* Auf sehr schmalen Screens bleibt nur der blinkende Punkt sichtbar — als
   kompaktes Vertrauenssignal direkt neben dem Logo, ohne den Header eng
   werden zu lassen. */
@media (max-width: 620px) {
  .status-pill {
    padding: 0.45em; gap: 0;
    background: #cdf0de; border-color: #93d9b4;
  }
  .status-pill__label { display: none; }
}

.text-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 650; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--line-strong); padding-bottom: 0.1em;
  transition: border-color .15s ease, color .15s ease;
}
.text-link:hover { border-color: var(--accent); color: var(--accent-deep); }
.text-link__arrow { transition: transform .15s ease; }
.text-link:hover .text-link__arrow { transform: translateX(3px); }

.nav-toggle {
  display: none; background: transparent; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s); width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 1.2rem; height: 2px; background: var(--ink);
  position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 0 0 auto auto; top: 4.2rem; right: 0;
    width: min(20rem, 84vw); height: calc(100vh - 4.2rem);
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding: var(--space-4) var(--space-3); transform: translateX(100%);
    transition: transform 0.25s ease; box-shadow: var(--shadow-s);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__links { flex-direction: column; gap: var(--space-2); }
  .main-nav__links a { font-size: 1.1rem; }
  .main-nav .btn { width: 100%; }
}

/* -------------------------------------------------------------- Blob-Klecks
   Verschwommene, organisch geformte Farbflecken — dasselbe Formmotiv wie im
   Favicon — als ruhig driftender Hintergrundakzent hinter Hero und
   Abschluss-CTA. Rein dekorativ, daher aria-hidden und ohne Einfluss auf
   die Textspalten-Breite. */
.blob-decor {
  position: absolute; z-index: 0; pointer-events: none;
  filter: blur(70px); opacity: 0.32;
  background: radial-gradient(circle at 30% 30%, var(--brand), var(--accent-2) 55%, transparent 75%);
  border-radius: 44% 56% 60% 40% / 50% 44% 56% 50%;
  animation: blob-float 16s ease-in-out infinite;
}
.blob-decor--hero { width: 28rem; height: 28rem; top: -7rem; right: -9rem; }
.hero--video .blob-decor--hero { opacity: 0.5; mix-blend-mode: screen; }
.blob-decor--cta {
  width: 24rem; height: 24rem; top: -6rem; left: -8rem;
  background: radial-gradient(circle at 30% 30%, var(--accent-3), var(--accent-4) 55%, transparent 75%);
  animation-duration: 19s;
}
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(2%, -3%) scale(1.06) rotate(9deg); }
  66% { transform: translate(-2%, 2%) scale(0.96) rotate(-7deg); }
}

/* Mobile: kleiner und weniger präsent, damit der Klecks nicht mit dem Text
   konkurriert. Im Hero läuft bereits das Video als bewegtes Element —
   der zusätzliche, driftende Blob-Klecks obendrauf wird dort stillgelegt,
   damit nicht zwei Bewegungen gleichzeitig um Aufmerksamkeit buhlen. */
@media (max-width: 640px) {
  .blob-decor--hero, .blob-decor--cta { width: 18rem; height: 18rem; opacity: 0.22; }
  .hero--video .blob-decor--hero { opacity: 0.3; animation: none; }
}

/* ------------------------------------------------------------------- Hero */
.hero { padding-block: clamp(2.5rem, 4vw + 1rem, var(--space-7)); position: relative; overflow: hidden; }

/* Video-Header: Bewegtbild als Hintergrund, mit Farbverlauf aus der
   Markenpalette überblendet, damit Text in Weiß darüber sicher lesbar
   bleibt (WCAG AA) und die Marke selbst bei bewegtem Hintergrund erkennbar
   ist. */
.hero--video { color: #fff; }
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__video-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(120deg, rgba(8, 20, 55, 0.93) 0%, rgba(10, 53, 133, 0.82) 42%, rgba(8, 20, 55, 0.6) 100%);
}
.hero--video .kicker { color: var(--accent-4); }
.hero--video .kicker::before { background: var(--accent-4); }
.hero--video h1 { color: #fff; }
.hero--video .lede { color: rgba(255, 255, 255, 0.86); }
.hero--video .hero__note { color: rgba(255, 255, 255, 0.72); border-top-color: rgba(255, 255, 255, 0.22); }
.hero--video .btn--primary { background: var(--accent-4); color: var(--ink); }
.hero--video .btn--primary:hover { background: #fff; }
.hero--video .text-link { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.hero--video .text-link:hover { border-color: var(--accent-4); color: var(--accent-4); }
.hero--video .mockup-caption { color: rgba(255, 255, 255, 0.68); }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__video-overlay { background: linear-gradient(120deg, var(--color-5), var(--brand)); }
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-4), 4vw, var(--space-6)); align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
.hero__content { max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.hero__note {
  margin-top: var(--space-4); font-size: 0.9rem; color: var(--ink-soft);
  padding-top: var(--space-3); border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .hero { padding-block: 2rem; }
  .hero__grid { gap: var(--space-4); }
  h1 { font-size: 2rem; }
  .hero .kicker { display: none; }
  .lede__secondary { display: none; }
  .hero__actions { margin-top: var(--space-3); }
  .hero__note { display: none; }
}

/* ------------------------------------------------------------ Key-Cluster
   Wiederkehrendes Formenmotiv: gruppierte, leicht gedrehte „Keycaps" in den
   drei Akzentfarben — eine bewusste Anspielung auf die 52 Tasten im Namen,
   kein beliebiges Deko-Element. */
.key-cluster { display: inline-flex; gap: 0.4rem; align-items: flex-end; }
.key-cluster span { display: block; width: 0.85rem; height: 0.85rem; border-radius: 4px; }
.key-cluster span:nth-child(1) { background: var(--accent); transform: rotate(-8deg); }
.key-cluster span:nth-child(2) { background: var(--accent-2); width: 1.05rem; height: 1.05rem; transform: rotate(5deg); }
.key-cluster span:nth-child(3) { background: var(--accent-3); transform: rotate(-4deg); }

.key-cluster--hero {
  position: absolute; top: -1.75rem; right: -0.75rem; z-index: 0;
  gap: 0.65rem;
}
.key-cluster--hero span { width: 2rem; height: 2rem; border-radius: 8px; box-shadow: var(--shadow-s); animation: key-float 5s ease-in-out infinite; }
.key-cluster--hero span:nth-child(2) { width: 2.5rem; height: 2.5rem; animation-delay: 0.6s; }
.key-cluster--hero span:nth-child(3) { animation-delay: 1.2s; }
@keyframes key-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.4rem; }
}
@media (max-width: 940px) { .key-cluster--hero { display: none; } }

/* --------------------------------------------------------- Browser-Mockup */
.mockup-stack { position: relative; }
.browser-mockup {
  position: relative; z-index: 1;
  border-radius: var(--radius-l); border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow-mockup); overflow: hidden;
}
.browser-mockup__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.85rem; background: var(--paper-alt); border-bottom: 1px solid var(--line);
}
.browser-mockup__dots { display: flex; gap: 0.32rem; flex: none; }
.browser-mockup__dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.browser-mockup__url {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.28rem 0.8rem; font-size: 0.72rem; color: var(--ink-soft); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser-mockup__screen { aspect-ratio: 4 / 3; background: var(--paper); position: relative; overflow: hidden; }

.mini-site { padding: 8% 9%; height: 100%; display: flex; flex-direction: column; gap: 9%; }
.mini-site__nav { display: flex; justify-content: space-between; align-items: center; flex: none; }
.mini-site__logo { width: 18%; height: 5%; min-height: 5px; background: var(--ink); border-radius: 2px; }
.mini-site__navlinks { display: flex; justify-content: flex-end; gap: 6%; width: 45%; }
.mini-site__navlinks span { flex: 1; height: 3.5%; min-height: 4px; background: var(--line-strong); border-radius: 2px; }
.mini-site__hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7%; }
.mini-site__headline { height: 8%; min-height: 7px; width: 78%; background: var(--ink); border-radius: 2px; }
.mini-site__headline--short { width: 48%; }
.mini-site__text { height: 4%; min-height: 4px; width: 92%; background: var(--line-strong); border-radius: 2px; }
.mini-site__text--w2 { width: 70%; }
.mini-site__cta { margin-top: 4%; width: 30%; height: 9%; min-height: 9px; background: var(--accent); border-radius: 999px; }
.mini-site__grid { display: flex; gap: 5%; flex: none; }
.mini-site__card { flex: 1; aspect-ratio: 1 / 0.75; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 5px; }

.mockup-caption {
  margin-top: var(--space-2); font-size: 0.82rem; color: var(--ink-soft);
  text-align: center; max-width: 22rem; margin-inline: auto;
}

/* Mobile-Hero: gut konvertierende mobile Seiten halten den ersten
   Bildschirm kompakt, statt ihn mit einer überlangen Hero-Sektion zu
   füllen. Flacheres Mockup, engerer Rhythmus, sekundärer Vertrauenstext
   dezenter — Headline, Subline und CTA sollen so schnell wie möglich
   sichtbar sein. */
@media (max-width: 640px) {
  .browser-mockup__screen { aspect-ratio: 16 / 10; }
  .mockup-caption { font-size: 0.78rem; max-width: 18rem; }
}

/* --------------------------------------------------------------- Problem */
.problem-list { display: grid; gap: 0.7rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
@media (max-width: 640px) { .problem-list { grid-template-columns: minmax(0, 1fr); } }
.problem-list li { display: flex; gap: 0.7rem; color: var(--ink-soft); font-size: 0.98rem; }
.problem-list li::before { content: "–"; color: var(--accent-deep); font-weight: 700; flex: none; }

/* ------------------------------------------------------------- Pull-quote */
.pull-quote {
  font-family: var(--font-display); font-weight: 540; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem); line-height: 1.22;
  max-width: 34rem;
}
.pull-quote em { font-style: normal; color: var(--accent-deep); }

/* -------------------------------------------------------------- Trust list */
.plain-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .plain-list { grid-template-columns: minmax(0, 1fr); } }
.plain-list__item { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.plain-list__item h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.plain-list__item p { color: var(--ink-soft); font-size: 0.97rem; }

/* ------------------------------------------------------------ Numbered list */
.numbered-list { max-width: 42rem; }
.numbered-list--wide { max-width: none; }
.numbered-item {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3);
  padding-block: var(--space-3); border-top: 1px solid var(--line);
}
.numbered-item:last-child { border-bottom: 1px solid var(--line); }
.numbered-item__num {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-deep); font-weight: 560;
}
/* Drei Akzentfarben rotieren durch die Nummern — spielerisch statt gleichförmig. */
.numbered-item:nth-of-type(3n+2) .numbered-item__num { color: var(--accent-2-deep); }
.numbered-item:nth-of-type(3n+3) .numbered-item__num { color: var(--accent-3-deep); }
.numbered-item h3 { margin-bottom: 0.35rem; }
.numbered-item p { color: var(--ink-soft); }
.numbered-item .placeholder-block { margin-top: 0.5rem; }

.numbered-grid {
  display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) { .numbered-grid { grid-template-columns: minmax(0, 1fr); } }
.numbered-grid .numbered-item { border-top: 1px solid var(--line); border-bottom: none; }

/* ------------------------------------------------------------ Process-Timeline
   Ersetzt die frühere, isoliert wirkende Zahlenliste im Ablauf: eine
   verbundene Linie mit farbigen Icon-Markern macht sofort klar, dass es
   sich um eine zeitliche Abfolge handelt. Die gestrichelte Linie „fließt"
   dezent nach unten — ein kleiner, aber deutlicher Bewegungshinweis auf
   die Prozess-Richtung. */
.process-timeline { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.process-step {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3);
  position: relative; padding-bottom: var(--space-5);
}
.process-step:last-child { padding-bottom: 0; }
.process-step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.625rem; top: 3.25rem; bottom: -0.25rem;
  width: 2px; transform: translateX(-1px);
  background-image: linear-gradient(var(--line-strong) 55%, transparent 45%);
  background-size: 2px 14px; background-repeat: repeat-y;
  animation: timeline-flow 1.4s linear infinite;
}
@keyframes timeline-flow { to { background-position: 0 14px; } }
.process-step__marker {
  position: relative; z-index: 1; width: 3.25rem; height: 3.25rem; flex: none;
  border-radius: 50%; background: #fff; border: 2px solid var(--accent);
  color: var(--accent-deep); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-s); transition: transform .25s ease;
}
.process-step__marker svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.8; }
.process-step:hover .process-step__marker { transform: scale(1.08); }
.process-step:nth-of-type(4n+2) .process-step__marker { border-color: var(--accent-2); color: var(--accent-2-deep); }
.process-step:nth-of-type(4n+3) .process-step__marker { border-color: var(--accent-3); color: var(--accent-3-deep); }
.process-step:nth-of-type(4n+4) .process-step__marker { border-color: var(--accent-4); color: var(--accent-4-deep); }
.process-step__num {
  display: block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem;
}
.process-step__body h3 { margin-bottom: 0.35rem; }
.process-step__body p { color: var(--ink-soft); }
@media (max-width: 640px) {
  .process-step { grid-template-columns: 2.6rem minmax(0, 1fr); padding-bottom: var(--space-4); }
  .process-step__marker { width: 2.6rem; height: 2.6rem; }
  .process-step__marker svg { width: 1.15rem; height: 1.15rem; }
  .process-step:not(:last-child)::before { left: 1.3rem; top: 2.6rem; }
}

/* ------------------------------------------------------------ Service-Highlight
   Zwei hervorgehobene Karten für die Kombination, die die meisten Kunden
   tatsächlich wählen (Website + laufende Betreuung) — bewusst nicht Teil
   der nummerierten Aufzählung, sondern optisch als Empfehlung abgesetzt. */
.service-highlight { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .service-highlight { grid-template-columns: minmax(0, 1fr); } }
.service-highlight__card {
  position: relative; background: #fff; border: 2px solid var(--accent);
  border-radius: var(--radius-l); padding: var(--space-4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-highlight__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-mockup); }
.service-highlight__card:nth-child(2) { border-color: var(--accent-2); }
.service-highlight__badge {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 0.35em 0.75em; border-radius: 999px; margin-bottom: var(--space-3);
}
.service-highlight__card:nth-child(2) .service-highlight__badge { background: var(--accent-2-deep); }
.service-highlight__icon {
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius-m); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent-deep); margin-bottom: var(--space-3);
}
.service-highlight__card:nth-child(2) .service-highlight__icon { background: var(--accent-2-tint); color: var(--accent-2-deep); }
.service-highlight__icon svg { width: 1.7rem; height: 1.7rem; stroke: currentColor; fill: none; stroke-width: 1.7; }
.service-highlight__card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.service-highlight__card p { color: var(--ink-soft); }

/* --------------------------------------------------------------- Service-Grid
   Die übrigen Bausteine — Icon statt Nummer, weil hier der Nutzen zählt,
   nicht die Reihenfolge. */
.service-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: minmax(0, 1fr); } }
.service-card { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.service-card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-m); margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: center; background: var(--paper-alt); color: var(--accent-deep);
}
.service-card__icon svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 1.7; }
.service-card:nth-of-type(3n+2) .service-card__icon { color: var(--accent-2-deep); }
.service-card:nth-of-type(3n+3) .service-card__icon { color: var(--accent-3-deep); }
.service-card h3 { margin-bottom: 0.35rem; }
.service-card p { color: var(--ink-soft); }

/* ------------------------------------------------------------------- Grid */
.grid { display: grid; gap: var(--space-4); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
@media (max-width: 700px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-4);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-mockup); border-color: var(--line-strong); }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); }

/* --------------------------------------------------------------- Case study */
.reference-item__head h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 560; }
.reference-item__scope { color: var(--ink-soft); margin-top: 0.35rem; font-size: 0.96rem; }
.reference-item__scope strong { color: var(--ink); }

/* ----------------------------------------------------------- Referenz-Karten
   Stilisierte Vorschau statt reiner Textliste: eine abstrahierte
   „Website"-Miniatur (dasselbe Linien-Motiv wie im Hero-Mockup) mit einem
   Branchen-Icon als Badge — macht auf einen Blick klar, um was für ein
   Projekt es sich handelt, auch ohne echten Screenshot. */
.reference-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .reference-grid { grid-template-columns: minmax(0, 1fr); } }

.reference-card {
  border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  background: #fff; transition: transform .2s ease, box-shadow .2s ease;
}
.reference-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-mockup); }

.reference-card__preview {
  position: relative; aspect-ratio: 4 / 3; padding: 14% 12%;
  display: flex; flex-direction: column; gap: 12%;
  background: linear-gradient(160deg, var(--accent-tint), #fff 65%);
}
.reference-card__browser { display: flex; gap: 0.3rem; flex: none; }
.reference-card__browser span { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--line-strong); }
.reference-card__lines { flex: 1; display: flex; flex-direction: column; gap: 16%; justify-content: center; }
.reference-card__lines span { display: block; height: 11%; border-radius: 3px; }
.reference-card__lines .l1 { width: 68%; background: var(--accent); }
.reference-card__lines .l2 { width: 92%; background: var(--line-strong); }
.reference-card__lines .l3 { width: 52%; background: var(--line-strong); }
.reference-card__badge {
  position: absolute; right: 1rem; bottom: -1.1rem; z-index: 1; width: 3rem; height: 3rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-s);
}
.reference-card__badge svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.7; }
.reference-card:nth-of-type(3n+2) .reference-card__preview:not(.reference-card__preview--logo) { background: linear-gradient(160deg, var(--accent-2-tint), #fff 65%); }
.reference-card:nth-of-type(3n+2) .reference-card__lines .l1 { background: var(--accent-2); }
.reference-card:nth-of-type(3n+2) .reference-card__badge { border-color: var(--accent-2); color: var(--accent-2-deep); }
.reference-card:nth-of-type(3n+3) .reference-card__preview:not(.reference-card__preview--logo) { background: linear-gradient(160deg, var(--accent-3-tint), #fff 65%); }
.reference-card:nth-of-type(3n+3) .reference-card__lines .l1 { background: var(--accent-3); }
.reference-card:nth-of-type(3n+3) .reference-card__badge { border-color: var(--accent-3); color: var(--accent-3-deep); }

/* Logo-Vorschau: das tatsächliche Kundenlogo statt abstrahierter Linien —
   zeigt auf einen Blick, um welchen Betrieb es sich handelt. */
.reference-card__preview.reference-card__preview--logo {
  background: linear-gradient(160deg, var(--paper-alt), #fff 70%);
  padding: 8% 10%; gap: 6%;
}
.reference-card__preview.reference-card__preview--dark {
  background: linear-gradient(160deg, var(--color-5), #16264f 75%);
}
.reference-card__preview--dark .reference-card__browser span { background: rgba(255, 255, 255, 0.35); }
.reference-card__logo-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.reference-card__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.reference-card__body { padding: var(--space-4) var(--space-3) var(--space-3); }
.reference-card__body .reference-item__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.reference-card__body .reference-item__scope { font-size: 0.9rem; }

/* ------------------------------------------------------------------ AI-Note */
.ai-note {
  border-left: 3px solid var(--accent-3); padding-left: var(--space-3);
  max-width: 38rem;
}
.ai-note p { color: var(--ink-soft); }
.ai-note p + p { margin-top: 0.6rem; }

/* ------------------------------------------------------------------- FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-2); cursor: pointer; font-weight: 640; font-size: 1.02rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-deep);
  flex: none; transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-soft); padding-bottom: var(--space-3); max-width: 40rem; }

/* --------------------------------------------------------------- Placeholder */
.notice { border-radius: var(--radius-m); padding: var(--space-3); display: flex; gap: 0.9rem; background: var(--note-bg); border: 1px solid var(--note-border); }
.notice--ok { background: var(--ok-tint); border-color: #bcdccb; }
.notice__icon { flex: none; font-size: 1.15rem; }
.notice p { margin-top: 0.2rem; color: var(--ink-soft); }
.notice strong { color: var(--ink); }

/* --------------------------------------------------------------- Map-Frame */
.map-frame {
  border-radius: var(--radius-m); border: 1px solid var(--line);
  overflow: hidden; box-shadow: var(--shadow-s); aspect-ratio: 4 / 3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ Form */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 650; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; }
.field input, .field textarea, .field select {
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: 0.85em 1em; background: #fff; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint); outline: none;
}
.field textarea { resize: vertical; min-height: 7rem; }
.form-row { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.form-consent input { margin-top: 0.3rem; }
.form-status { border-radius: var(--radius-s); padding: 0.9em 1.1em; font-weight: 600; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--ok-tint); color: var(--ok); }
.form-status.is-error { background: var(--note-bg); color: var(--ink); }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ CTA */
.cta-block { text-align: left; position: relative; z-index: 1; padding-block: var(--space-2); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

.section:has(.cta-block) { position: relative; overflow: hidden; }

/* ---------------------------------------------------------------- Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-4); background: var(--paper-alt); }
.footer__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer__brand p { color: var(--ink-soft); margin-top: 0.8rem; max-width: 24rem; }
.footer h4 { font-family: var(--font-text); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.9rem; }
.footer ul li + li { margin-top: 0.55rem; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--accent-deep); text-decoration: underline; }
.footer__bottom {
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.87rem; color: var(--ink-soft);
}

/* ------------------------------------------------------------- Utilities */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.divider { height: 1px; background: var(--line); border: none; }

.legal h2 { margin-top: var(--space-5); }
.legal h3 { margin-top: var(--space-3); }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal ul li + li, .legal ol li + li { margin-top: 0.4rem; }

/* Ohne JavaScript (oder solange es noch lädt) ist alles normal sichtbar —
   die Einblend-Animation ist reine Zugabe für JS-fähige Browser, niemals
   Voraussetzung, um Inhalte überhaupt zu sehen. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------ Über-mich */
.avatar-frame {
  width: 9.5rem; height: 9.5rem; border-radius: var(--radius-l);
  background: var(--paper-alt); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-soft);
  text-align: center; padding: var(--space-2); flex: none;
  overflow: hidden;
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; }