/* ============================================================
   Dein Konfigurator — Landing Page
   Design-Tokens aus dem Claude-Design-Entwurf übernommen.
   ============================================================ */

:root {
  --bg:        #07070d;
  --panel:     #101319;
  --text:      #e9eaf0;
  --bright:    #c3c8d4;
  --muted:     #9ba2b3;
  --muted-2:   #8e95a6;
  --muted-3:   #8b93a6;
  --muted-4:   #7f869a;
  /* etwas heller als im Entwurf: auf den blauen Baendern der Seite lag der
     Kontrast der Kleintexte sonst unter 4,5:1 */
  --dim:       #838ba0;
  --nav:       #a7adbd;

  --accent:    #3A55E7;
  --accent-hi: #4b64ee;
  --accent-2:  #7d92ff;
  --accent-3:  #8fa3ff;

  --grid-cell:    80px;
  --grid-line:    rgba(255,255,255,.028);
  --grid-line-hi: rgba(150,170,255,.055);

  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.07);
  --line-hard: rgba(255,255,255,.12);
  --ring:      rgba(58,85,231,.55);

  --sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-3); }
::selection { background: var(--accent); color: #fff; }
input, textarea, select { font-family: var(--sans); }
input::placeholder, textarea::placeholder { color: var(--dim); }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ── Grundgerüst ─────────────────────────────────────────── */

/* Zwei Ebenen: oben der kräftige Verlauf des Entwurfs, darunter eine
   wiederkehrende blaue Welle, damit die untere Seitenhälfte nicht in
   durchgehendem Schwarz endet. Beide in Pixeln statt Prozent — sonst
   verschiebt sich der Rhythmus mit jeder Änderung an der Seitenlänge. */
.page {
  min-height: 100vh;
  position: relative;
  background-color: #07070d;
  background-image:
    linear-gradient(180deg,
      #17225c 0px,
      #141c50 220px,
      #0e1336 560px,
      #090b1a 1000px,
      rgba(7,7,13,0) 1600px),
    repeating-linear-gradient(180deg,
      rgba(26,38,104,0)   0px,
      rgba(26,38,104,.58) 900px,
      rgba(26,38,104,.58) 1500px,
      rgba(26,38,104,0)   2400px);
  overflow-x: clip;
}

.glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1200px;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -80px, rgba(58,85,231,.55), transparent 68%),
    radial-gradient(1400px 700px at 50% 40px, rgba(58,85,231,.3), transparent 70%);
}

/* Dezentes Rechteckraster über der ganzen Seite.
   Die Maske blendet es zu den Seitenrändern hin aus, damit die Linien
   nicht hart am Viewport-Rand abreißen. */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

/* Im Hero-Bereich einen Tick heller und leicht ins Blaue, damit das Raster
   dort mit dem Glow zusammenspielt und nach unten weich ausläuft. */
.grid-lines::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1400px;
  background-image:
    linear-gradient(to right, var(--grid-line-hi) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-hi) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
}

.hairline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,160,255,.6), transparent);
}

.wrap { max-width: var(--wrap); margin: 0 auto; }

.section {
  border-top: 1px solid var(--line-soft);
  padding: 96px 28px;
  position: relative;
}

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

.site-header {
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 60;
  /* Gleicher Seitenabstand wie .section und .site-footer (28px), damit die
     Leiste exakt ueber den Inhaltskanten der Abschnitte sitzt. */
  padding: 0 28px;
}

.nav-bar {
  /* Dieselbe Breite wie .wrap — die Leiste flieht mit dem Seiteninhalt. */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 8px 8px 22px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 26px;
  border-radius: 999px;
  border: 1px solid var(--line-hard);
  background: rgba(14,18,45,.66);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* EK-Monogramm, weiss auf transparent. Hoehe fuehrt, die Breite ergibt
   sich aus dem Seitenverhaeltnis 1.475 — deshalb width:auto statt fester
   Werte, sonst wird das Logo verzerrt. */
.brand-mark {
  height: 26px;
  width: auto;
  display: block;
  flex: none;
}
.brand-mark.sm { height: 22px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14.5px;
  color: var(--nav);
}
.nav-links a { color: var(--nav); white-space: nowrap; }

.nav-spacer { flex: 1; }

.cta-short { display: none; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 15.5px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); color: #fff; }
.btn-pill { border-radius: 999px; padding: 10px 20px; font-size: 14.5px; }
.cta-bar .btn, .process .btn { padding: 13px 24px; font-size: 15px; }

/* ── Typografie-Bausteine ────────────────────────────────── */

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.eyebrow.center { text-align: center; }

.kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.h2 {
  margin: 16px 0 0;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: pretty;
}
.h2-lg { font-size: clamp(33px, 4.7vw, 48px); line-height: 1.08; }
.h2-sm { font-size: clamp(30px, 4.1vw, 42px); line-height: 1.12; }
.h2-xl { font-size: clamp(36px, 5.4vw, 54px); line-height: 1.06; letter-spacing: -.035em; margin-top: 18px; }
.h2.center { text-align: center; }

.h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: pretty;
}

.lead {
  margin: 16px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
#branchen .lead { margin-top: 18px; font-size: 18px; line-height: 1.55; }
.lead.center { margin-left: auto; margin-right: auto; text-align: center; font-size: 18px; }

.prose {
  margin: 18px 0 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.prose.lg { margin-top: 22px; font-size: 18px; }
.prose.bright { color: var(--bright); }
.author .prose:first-of-type { margin-top: 24px; }

.footnote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-4);
}
.footnote.center { margin: 14px auto 0; text-align: center; font-size: 15px; line-height: 1.6; }

.accent { color: var(--accent-2); }
.strong { font-weight: 500; }

.mw-460 { max-width: 460px; }
.mw-580 { max-width: 580px; }
.mw-600 { max-width: 600px; }
.mw-700 { max-width: 700px; }
.mw-820 { max-width: 820px; }
.mw-860 { max-width: 860px; }

.mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-22 { margin-top: 22px; }
.mt-28 { margin-top: 28px; } .mt-40 { margin-top: 40px; } .mt-44 { margin-top: 44px; }
.mt-48 { margin-top: 48px; } .mt-52 { margin-top: 52px; } .mt-54 { margin-top: 54px; }

/* ── Karten & Raster ─────────────────────────────────────── */

/* Karten bewusst halbtransparent statt im festen Panel-Ton: Der Seiten-
   hintergrund wechselt zwischen Blau und Schwarz, ein deckendes #101319
   wirkte auf den blauen Wellen wie ein Loch statt wie eine Fläche darüber. */
.card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.card-accent {
  border-color: var(--ring);
  background: linear-gradient(180deg, rgba(58,85,231,.18), rgba(255,255,255,.045) 45%);
}
.card-hover { transition: border-color .15s ease; }
.card-hover:hover { border-color: rgba(58,85,231,.6); }

.pad-28 { padding: 28px; }
.pad-30 { padding: 30px; }

.grid { display: grid; gap: 16px; }
.auto-290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card-text { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.use-title { margin: 12px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
#branchen .card-text { margin-top: 10px; font-size: 15px; }

.cta-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02);
}
.cta-bar-text {
  margin: 0;
  flex: 1;
  min-width: 280px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.cta-bar-text.strong { font-size: 19px; color: var(--text); line-height: 1.4; }

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 132px 28px 0;
  text-align: center;
  position: relative;
}

/* Die Ueberschrift bricht per <br> nach dem ersten Satz um und soll
   zweizeilig bleiben. Dafuer muessen zwei Dinge stimmen:

   max-width: "Dein Angebot braucht Stunden." misst bei 70px genau 973px —
   bei den frueheren 940px brach die Zeile ein zweites Mal um.

   6.3vw statt 7vw: Der Satz ist rund 13,9-mal so breit wie die Schrift
   hoch. Bei 7vw waechst er schneller als der verfuegbare Platz, dadurch
   war die Zeile im Bereich um 900px wieder dreizeilig. Mit 6.3vw haelt
   der Umbruch bis hinunter zu etwa 620px; darunter ist Zweizeiligkeit bei
   40px Mindestgroesse rechnerisch nicht mehr moeglich. */
.hero-title {
  margin: 18px auto 0;
  max-width: 1000px;
  font-size: clamp(40px, 6.3vw, 70px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 600;
  text-wrap: pretty;
}

.hero-lead {
  margin: 20px auto 0;
  max-width: 600px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}


/* ── Das Formular im Hero ────────────────────────────────── */

.hero-form {
  margin: 30px auto 0;
  /* .form-card setzt weiter unten ebenfalls 720px — hier explizit, damit der
     Wert nicht von der Quellreihenfolge abhängt. */
  max-width: 720px;
  /* Knapp gehalten: Das Widget bringt im Shadow DOM seine eigene weisse
     Karte samt Innenabstand mit. Ein zweiter dicker Rahmen darum sieht nach
     Versehen aus — aussen bleibt nur Schatten und Platz fuer den Hinweis. */
  padding: 10px 10px 16px;
  text-align: left;
  background: rgba(13,16,23,.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  /* addiert sich zum scroll-padding-top des Dokuments (92px) */
  scroll-margin-top: 24px;
}
.form-card-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}
.hero-form .form-legal { padding: 0 14px; }

.hero-secondary {
  margin: 40px 0 0;
  font-size: 14.5px;
}
.hero-secondary a {
  color: var(--muted-3);
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 2px;
}
.hero-secondary a:hover { color: var(--accent-3); }

/* Drei Ergebnisse direkt unter dem Formular. Die Zwischenzeile hält sauber
   getrennt, was der Prototyp liefert und was der fertige Konfigurator. */
.hero-args-intro {
  margin: 46px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.hero-args {
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 960px;
  text-align: left;
}
.hero-args li {
  display: block;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.arg-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.arg-title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.arg-text {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-2);
  text-wrap: pretty;
}


/* ── Demo-Browser ────────────────────────────────────────── */

.demo-section {
  padding: 44px 28px 0;
  position: relative;
}
.demo-block { max-width: 1060px; margin: 0 auto; }

/* Zwei animierte Hinweise: rechts auf die Branchen-Umschalter, links auf den
   Konfigurator selbst. Beide liegen im normalen Fluss, können also nichts
   überdecken, und laufen versetzt, damit sie nicht im Gleichtakt wippen. */
.demo-hint {
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--accent-2);
  animation: hint-float 2.6s ease-in-out infinite;
}
/* Rückfallposition für schmale Fenster: im Fluss über dem jeweiligen Ziel. */
.demo-hint-right { margin: 0 96px -16px auto; }
.demo-hint-left {
  margin: 6px auto -20px 96px;
  animation-delay: .8s;
}
.demo-hint-arrow.flip { transform: scaleX(-1); }
.demo-hint-left .demo-hint-label {
  white-space: normal;
  max-width: 230px;
  text-align: center;
  line-height: 1.5;
}
.demo-hint-arrow {
  width: 74px;
  height: 80px;
  opacity: .95;
}
.demo-hint-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-3);
}

@keyframes hint-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}

.demo-footnote {
  margin: 18px auto 0;
  max-width: 700px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-4);
}

.demo-tabs {
  margin: 4px auto 0;
  max-width: 1060px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.demo-tab {
  padding: 10px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--nav);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.demo-tab:hover { border-color: rgba(58,85,231,.7); }
.demo-tab[aria-selected="true"] {
  border-color: rgba(58,85,231,.9);
  background: rgba(58,85,231,.22);
  color: var(--text);
}

.browser {
  margin: 18px auto 0;
  max-width: 1060px;
  border-radius: 18px;
  border: 1px solid var(--line-hard);
  background: #0d1017;
  padding: 12px;
  box-shadow: 0 40px 120px rgba(58,85,231,.22);
}
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 14px;
}
.browser-chrome .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  flex: none;
}
.browser-url {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.browser-url span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-chrome-pad { width: 34px; flex: none; }
.browser-screen {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.demo-panel { min-width: 1010px; text-align: left; }

/* Layout der Demo-Panels: Die Maße kommen als Custom Properties aus dem
   Inline-Style, die Eigenschaften selbst stehen hier. Nur so lassen sie sich
   per Media Query umbrechen — direkte Inline-Angaben wären unantastbar. */
.dp-grid {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap, 0);
}
.dp-pad { padding: var(--pad); }
.demo-panel input[type="range"] {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.demo-panel button { border: 0; background: none; }

/* ── Angebot ─────────────────────────────────────────────── */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* ── Relevanz-Kriterien ──────────────────────────────────── */

.criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.criteria li {
  display: flex;
  gap: 24px;
  padding: 26px 2px;
  border-top: 1px solid var(--line);
}
.criteria li:last-child { border-bottom: 1px solid var(--line); }
.criteria-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-2);
  width: 26px;
  flex: none;
  padding-top: 4px;
}
.criteria-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.criteria-text { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted-2); max-width: 640px; }


/* ── Ausgangslage ────────────────────────────────────────── */


/* ── Problem-Sektionen ───────────────────────────────────── */

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.problem.flip .problem-copy { order: 2; }
.problem-copy .lead { margin-top: 18px; }

.solution-label {
  margin: 32px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.solution-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.solution-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bright);
  text-wrap: pretty;
}

.solution-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.problem-cta { margin: 30px 0 0; font-size: 15px; font-weight: 600; }
.problem-cta a { color: var(--accent-3); }
.problem-cta a:hover { color: #b3c1ff; }

.mock-caption {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dim);
  text-align: center;
}

/* ── Rahmen der Erklärszenen ─────────────────────────────── */

/* Bewusst keine nachgebaute Oberfläche, sondern eine Erklärgrafik: Jede soll
   die Geschichte ihres Abschnitts auf einen Blick erzählen. Deshalb im Ton
   der Seite gehalten und nicht als heller Screenshot. Der Inhalt der Karten
   steht in css/scenes.css. */
.dia {
  border: 1px solid var(--line-hard);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  padding: 26px 26px 24px;
  box-shadow: 0 30px 70px -45px rgba(0,0,0,.9);
}

.dia-cap {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Konfigurator-Ausschnitte ────────────────────────────── */

/* Alle Farben laufen über Tokens, damit ein Ausschnitt per Skin-Klasse die
   Optik einer der sechs Branchen-Demos erben kann. Sonst sähen alle sieben
   Problem-Grafiken gleich aus. */
/* Die Tokens hängen an beiden Wurzeln: Der Telefon-Ausschnitt trägt kein
   .mock, verwendet aber dieselben Bausteine. */
.mock,
.mock-phone-screen {
  --mk-bg:        #fff;
  --mk-fg:        #17181a;
  --mk-line:      #e6e2da;
  --mk-dim:       #a9a49c;
  --mk-sub:       #7d786f;
  --mk-acc:       #3A55E7;
  --mk-acc-soft:  #f2f4ff;
  --mk-acc-line:  rgba(58,85,231,.28);
  --mk-acc-text:  #2c3fae;
  --mk-soft:      #f4f2ee;
  --mk-barfill:   #ccd4fa;
  --mk-ok:        #2f6b45;
  --mk-ok-bg:     #edf7f0;
  --mk-ok-line:   #cbe6d5;
  --mk-warn:      #8a5a25;
  --mk-warn-bg:   #fdf3ea;
  --mk-warn-line: #f0dcc6;
  --mk-warn-fill: #e2a06a;
}

/* Karten-Optik nur für den freistehenden Ausschnitt, nicht für den
   Telefon-Bildschirm — der bringt Radius und Innenabstand selbst mit. */
.mock {
  background: var(--mk-bg);
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  padding: 24px 24px 22px;
  font-family: 'Space Grotesk', var(--sans);
  color: var(--mk-fg);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.85);
}

/* Bau & Ausbau */
.mock.mk-warm {
  --mk-bg: #fbf8f3; --mk-line: #e6dfd3; --mk-fg: #2c2620;
  --mk-dim: #9c9284; --mk-sub: #7a7166;
  --mk-acc: #4c7a52; --mk-acc-soft: #f2f7f1; --mk-acc-line: #c3d1bd;
  --mk-acc-text: #3d6342; --mk-soft: #efe9de; --mk-barfill: #cfdcc9;
  font-family: 'Manrope', var(--sans);
}

/* Security-Beratung */
.mock.mk-dark {
  --mk-bg: #0e1116; --mk-line: #232b35; --mk-fg: #e8edf3;
  --mk-dim: #6f7a86; --mk-sub: #7d8794;
  --mk-acc: #4ade9b; --mk-acc-soft: rgba(74,222,155,.12); --mk-acc-line: rgba(74,222,155,.4);
  --mk-acc-text: #7fe9b8; --mk-soft: #171c24; --mk-barfill: #2c5f49;
  --mk-ok: #7fe9b8; --mk-ok-bg: rgba(74,222,155,.1); --mk-ok-line: rgba(74,222,155,.3);
  --mk-warn: #e8b98a; --mk-warn-bg: rgba(226,160,106,.12); --mk-warn-line: rgba(226,160,106,.35);
}

/* IT-Dienstleister */
.mock.mk-soft {
  --mk-bg: #eef0f4; --mk-line: #dde2ea; --mk-fg: #2b3242;
  --mk-dim: #8b93a5; --mk-sub: #6d7688;
  --mk-acc: #3d9db3; --mk-acc-soft: #e4f0f3; --mk-acc-line: #b6d8e0;
  --mk-acc-text: #2b7d92; --mk-soft: #e6e9f0; --mk-barfill: #bcd8e0;
  font-family: 'Manrope', var(--sans);
}

/* Browser-Rahmen: lässt die Ausschnitte als Bildschirm lesen statt als Kasten */
.mock-frame .mock {
  border-radius: 11px;
  border: 0;
  box-shadow: none;
}


.mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-dim);
  margin-bottom: 18px;
}
.mock-crumb { color: var(--mk-acc); }

.mock-q {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.mock-stack { display: grid; gap: 9px; }

.mock-opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 11px;
  border: 1px solid var(--mk-line);
  background: var(--mk-bg);
  font-size: 14px;
  font-weight: 500;
}
.mock-opt.wide { justify-content: space-between; }
.mock-opt.is-on { border: 1.5px solid var(--mk-acc); background: var(--mk-acc-soft); }

.mock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mk-acc);
  box-shadow: inset 0 0 0 3px var(--mk-bg);
  flex: none;
}











.mock-note.ok { background: var(--mk-ok-bg); border: 1px solid var(--mk-ok-line); color: var(--mk-ok); }


.mock-pill {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--mk-soft);
  border: 1px solid var(--mk-line);
  font-size: 12.5px;
  font-weight: 500;
}
.mock-pill.on { background: var(--mk-acc); border-color: var(--mk-acc); color: var(--mk-bg); font-weight: 600; }





/* Geräterahmen für den mobilen Ausschnitt — nutzt dieselben .mock-Bausteine
   wie die übrigen Ansichten, nur schmaler und mit größeren Tippflächen. */
.mock-phone {
  width: 302px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
  background: #0d1017;
  border: 1px solid var(--line-hard);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}

.mock-phone-screen {
  background: #fff;
  border-radius: 26px;
  padding: 20px 17px 18px;
  font-family: 'Space Grotesk', var(--sans);
  color: #17181a;
}
.mock-phone .mock-q { font-size: 17px; }
.mock-phone .mock-opt { padding: 15px 16px; font-size: 14.5px; }

.mock-phone-bar {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #e6e2da;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mock-phone-bar > div span {
  display: block;
  font-size: 11.5px;
  color: #7d786f;
}
.mock-phone-bar > div b {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}



/* ── Passt das zu dir / Vergleich ────────────────────────── */

.fit-title { margin: 0; font-size: 19px; font-weight: 600; }
.fit-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted-2);
}
.fit-list.bright { color: var(--bright); }

/* Haken und Kreuz als reine CSS-Formen — bleiben in jeder Aufloesung scharf
   und brauchen kein Icon-Markup pro Zeile. */
.fit-list.check li,
.fit-list.cross li {
  position: relative;
  padding-left: 30px;
}

.fit-list.check li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid #4ade9b;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.fit-list.cross li::before,
.fit-list.cross li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #ef6d58;
}
.fit-list.cross li::before { transform: rotate(45deg); }
.fit-list.cross li::after  { transform: rotate(-45deg); }


/* ── Leistung ────────────────────────────────────────────── */



.feature-title.sm { font-size: 20px; letter-spacing: -.02em; }
.feature-text.sm { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }



/* ── Ablauf ──────────────────────────────────────────────── */

.process {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.process-list { display: grid; gap: 14px; }

.process-step {
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  gap: 20px;
}
.process-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-2);
  padding-top: 3px;
  flex: none;
}
.process-title { margin: 0; font-size: 17.5px; font-weight: 600; }
.process-text { margin: 7px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-2); }
.process-text.divider {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── Absender ────────────────────────────────────────────── */

.author {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px;
  align-items: start;
}
.portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; min-width: 0; }
/* Die Vorlage ist 2:3, der Rahmen 4:5 — der Beschnitt läuft also über die
   Höhe. Der Bildausschnitt sitzt etwas höher, damit über dem Kopf Luft
   bleibt und unten die Beine wegfallen statt der Stirn. */
.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* ── Erfahrung ───────────────────────────────────────────── */

.case {
  margin: 32px 0 0;
  border-left: 2px solid rgba(58,85,231,.8);
  padding: 4px 0 4px 26px;
}
.case-text {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--bright);
  text-wrap: pretty;
}

/* ── FAQ ─────────────────────────────────────────────────── */

.faq {
  margin: 44px auto 0;
  max-width: 900px;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 2px;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color .15s ease;
}
.faq-q:hover { color: var(--accent-3); }
.faq-q-text { flex: 1; font-size: 17.5px; font-weight: 500; }
.faq-icon { font-size: 12px; color: var(--muted-2); flex: none; }
.faq-a {
  padding: 0 60px 24px 2px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted-2);
}

/* ── Prototyp-Formular ─────────────────────────────────────
   Nur noch Traeger und Rechtshinweis: Die Schritte rendert Clickforms
   im Shadow DOM, dorthin reicht keine Regel von hier. */

.cta-section {
  padding: 110px 28px;
  background: radial-gradient(900px 460px at 50% 0%, rgba(58,85,231,.24), transparent 70%);
}
.cta-head { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-head .eyebrow { text-align: center; }
.cta-head-actions { margin: 30px 0 0; }

.form-card {
  max-width: 720px;
  margin: 40px auto 0;
  border: 1px solid var(--line-hard);
  border-radius: 20px;
  background: var(--panel);
  padding: 32px;
}

.form-legal {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-4);
}
/* ── Fußzeile ────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 64px 28px 40px;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-about {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 300px;
}
.footer-head { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.footer-links { margin-top: 14px; display: grid; gap: 10px; font-size: 14px; }
.footer-links a { color: var(--muted-2); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  color: var(--dim);
  flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Genug Platz neben dem 1060px-Block: Die Hinweise wandern in die Seitenränder
   und zeigen von außen auf ihr Ziel — der rechte auf die Umschalterreihe, der
   linke in den Konfigurator hinein. */
@media (min-width: 1400px) {
  .demo-section { padding-top: 96px; }
  .demo-switch, .demo-stage { position: relative; }

  .demo-hint {
    position: absolute;
    margin: 0;
    z-index: 2;
  }
  /* So weit herangerückt, dass die Pfeilspitze die Umschalterreihe bzw. die
     Kachel tatsächlich berührt — die Beschriftung bleibt im Seitenrand. */
  .demo-hint-right {
    right: -88px;
    bottom: -4px;
  }
  .demo-hint-left {
    left: -84px;
    top: -46px;
  }
  .demo-hint-label {
    font-size: 11.5px;
    letter-spacing: .13em;
  }
  .demo-hint-left .demo-hint-label { max-width: 156px; }
}

/* Flache Laptop-Viewports: Headline und Abstände zurücknehmen, damit das
   Formular vollständig über der Falz steht. */
@media (min-width: 861px) and (max-height: 900px) {
  .hero { padding-top: 112px; }
  .hero-title { font-size: clamp(36px, 4.6vw, 54px); }
  .hero-lead { margin-top: 16px; font-size: 17.5px; }
  .hero-form { margin-top: 26px; }
}

/* Demo-Konfiguratoren: Ab hier stapeln die Spalten, statt seitlich zu
   scrollen. Die Typo der Panels steckt inline im generierten Markup, deshalb
   sind die wenigen Größen hier mit !important überschrieben — es gibt keinen
   anderen Weg, an einen Inline-Style heranzukommen. */
@media (max-width: 900px) {
  .demo-panel { min-width: 0; }
  .dp-grid { grid-template-columns: 1fr; gap: min(var(--gap, 0px), 22px); }
  .dp-pad  { padding: 22px 18px 24px; }
  .demo-panel h3 { font-size: 21px !important; line-height: 1.22 !important; }
  .dp-price { font-size: 29px !important; }
  /* Flex- und Grid-Kinder dürfen unter ihre Mindestbreite schrumpfen. Ohne
     das schieben lange Beschriftungen die Zeile aus dem Panel heraus. */
  .demo-panel div,
  .demo-panel span,
  .demo-panel button,
  .demo-panel p,
  .demo-panel h3 { min-width: 0; }
  /* Sicherheitsnetz gegen einzelne lange Wörter wie „Fertigungsaufträge“ */
  .demo-panel { overflow-wrap: break-word; }
  /* ERP-Modulzeile: Symbol und Text auf Zeile eins, Preis und Schalter
     rechtsbündig darunter — sonst überlagern sie den Text. */
  .dp-mod {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    row-gap: 10px !important;
  }
  .dp-mod > div:nth-child(2) { flex: 1 1 calc(100% - 58px) !important; }
  /* Kopfzeilen mit Titel links und Statusangabe rechts brechen um, statt die
     Wörter zu zerlegen. */
  .dp-head { flex-wrap: wrap !important; row-gap: 8px !important; }
  .demo-panel img { min-height: 0 !important; }
  .demo-panel [style*="min-height:330px"] { min-height: 200px !important; }
  .browser { padding: 8px; }
  .browser-screen { overflow-x: hidden; }
}

@media (max-width: 1000px) {
  .problem-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Beim Umbruch steht der Text immer zuerst, egal wie die Zeile lief. */
  .problem.flip .problem-copy { order: 0; }
  .process { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero { padding-top: 140px; }
  .section { padding: 72px 22px; }
  /* Kopfzeile folgt dem Seitenabstand der Abschnitte */
  .site-header { padding: 0 22px; }
  .demo-section { padding: 36px 22px 0; }
  .demo-hint-right { margin-right: 40px; }
  .demo-hint-left { margin-left: 40px; }
  .cta-section { padding: 84px 22px; }
  .site-footer { padding: 56px 22px 36px; }
  .pad-40 { padding: 28px; }
  .cta-bar { padding: 24px; }
  .form-card { padding: 24px; }
  .faq-a { padding-right: 8px; }
}

@media (max-width: 560px) {
  :root { --grid-cell: 56px; }
  .site-header { top: 10px; padding: 0 22px; }
  .nav-bar { padding: 8px 8px 8px 14px; gap: 10px; }
  /* Logo und Schriftzug ruecken zusammen, sonst schiebt sich der Schriftzug
     unter den CTA. Das Monogramm ist breiter als das fruehere Quadrat. */
  .brand { font-size: 13.5px; gap: 7px; }
  .brand-mark { height: 20px; }
  .nav-cta { font-size: 13px; padding: 9px 14px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .hero { padding: 106px 20px 0; }
  .hero-lead { margin-top: 16px; font-size: 17px; }
  .hero-form { margin-top: 24px; padding: 20px 18px 18px; border-radius: 16px; }
  .demo-section { padding: 28px 16px 0; }
  .demo-hint-right { margin: 0 8px -14px auto; }
  .demo-hint-left { margin: 4px auto -16px 8px; }
  .demo-hint-arrow { width: 60px; height: 66px; }
  .criteria li { gap: 14px; padding: 22px 2px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .loop li { gap: 14px; }
  .process-step { padding: 20px; gap: 14px; }
}