/* ============================================================================
   myfairs Marketing Site — "Industry" rebrand (Landing + Kontakt)
   Ported from design_handoff_myfairs_rebrand/README.md + design/_ds/…/styles.css

   SCOPING: every token and component here lives under `.mkt`. The app-wide
   design system (design_system.css) uses a different accent (#7098BF) and a
   different accent ramp; overwriting :root would restyle the whole dashboard
   and ACP. The marketing site gets its own ramp (#5980A6) inside .mkt only.

   Fonts are self-hosted (no Google Fonts request — DSGVO). Headings Archivo
   (variable, wght 400–700, wdth axis pinned at 100), body Barlow.
   ========================================================================== */

/* ── Self-hosted fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: "Archivo";
  src: url(/assets/fonts/Archivo/Archivo-Variable.woff2) format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Web";
  src: url(/assets/fonts/Barlow/Barlow-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Web";
  src: url(/assets/fonts/Barlow/Barlow-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Web";
  src: url(/assets/fonts/Barlow/Barlow-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Web";
  src: url(/assets/fonts/Barlow/Barlow-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.mkt {
  /* One tinted ground, carrying a trace of the accent hue (the old neutral
     #f2f2f3 read as dirty grey next to it). It is used only by the sections that
     hold cards — a white card needs a ground to sit on. Everything else is
     white; see the section list below. */
  --color-bg: #eff1f6;
  --color-surface: #edeff4;
  --color-card: #ffffff;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  /* Filled controls use a slightly darker accent. White on #5980A6 is only
     4.14:1, which fails WCAG AA for text below 18.66px bold — and every button
     label here is 14–16px. #4D7295 reaches 5.06:1 while staying visually within
     the brand. --color-accent itself is left alone: it only carries hairlines,
     focus rings and ::selection, where the 4.5:1 text rule does not apply. */
  --color-accent-cta: #4d7295;
  /* The corporate blue itself. Too light to carry text (white on it is 2.7:1),
     so it is used for rules, rails and rings only — never as a text or a filled
     label colour. That is why --color-accent-cta exists. */
  --color-brand: #7098bf;
  --color-divider: rgba(29, 31, 32, 0.16);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow Web", "Barlow", system-ui, sans-serif;

  /* Density 0.85× */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius: 12px;
  --shadow-card: 0 8px 24px -16px rgba(0, 0, 0, 0.4);

  /* Blueprint ground — a pale steel field (the paper technical drawings are
     printed on) with cool ink, so it reads as blue without tinting the type
     illegible. Cards and accordions are plain white; this is now carried only by
     the calculator's result panel. */
  --bp-top: #f5faff;
  --bp-bottom: #e6effa;
  --bp-edge: rgba(89, 128, 166, 0.28);
  --bp-edge-strong: rgba(89, 128, 166, 0.52);
  --bp-ink: #35424f;          /* body copy on the blueprint ground — ~9:1 */
  --bp-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --wrap: 1240px;
  --header-h: 62px;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.mkt *,
.mkt *::before,
.mkt *::after { box-sizing: border-box; }

/* These are RESETS, so they are wrapped in :where() to carry zero specificity.
   Written as `.mkt h2 { margin: 0 }` they compute to (0,1,1) and silently beat
   every single-class rule below — .mkt-flow-heading, .mkt-closer, .mkt-roadmap,
   .mkt-faq-closer, .mkt-features-grid and friends all lost their margins that
   way, which is why several sections looked cramped. Keep :where() here. */
:where(.mkt) :where(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
:where(.mkt) :where(p) { margin: 0; }
/* height:auto is load-bearing, not decoration. The images carry width/height
   attributes (so the browser reserves the right box and nothing shifts on load),
   but those attributes also pin the used height. Constraining the width with
   max-width and leaving height alone squashes the image — e.g. the hero mockup
   rendered 625×651 (aspect 0.96) instead of its natural 1.4747. */
.mkt img { display: block; max-width: 100%; height: auto; }
.mkt figure { margin: 0; }
/* `ol` matters as much as `ul`: the Ablauf steps are an ordered list and would
   otherwise render browser decimals next to the big 01–04 numerals.
   :where() for the same reason as the heading/paragraph resets above. */
:where(.mkt) :where(ul, ol) { list-style: none; padding: 0; margin: 0; }

/* Default prose link. Deliberately kept at (0,1,1) so the component rules that
   follow — .mkt-nav a, .mkt-footer-col a, … — can override it on source order.
   Buttons out-specify it with two classes (.mkt-btn.mkt-btn-primary) rather
   than this rule excluding them, which would raise it to (0,2,1) and start
   winning against the nav. */
.mkt a { color: var(--color-accent-700); text-underline-offset: 3px; }
.mkt a:hover { color: var(--color-accent-900); }

.mkt :focus { outline: none; }
.mkt :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mkt ::selection { background: rgba(89, 128, 166, 0.3); }

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

/* Screen-reader-only, for the skip link and visually hidden legends */
.mkt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mkt-skip {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  background: var(--color-accent-cta); color: #ffffff;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  transition: top 0.15s ease;
}
.mkt-skip:focus { top: var(--space-3); color: #ffffff; }

/* ── Typography scale ───────────────────────────────────────────────────── */
.mkt-h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; }
.mkt-h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; }
.mkt-h2-lg { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.04; }
.mkt-lead-hero { font-size: 19px; line-height: 1.5; color: var(--color-neutral-800); }
.mkt-lead { font-size: 17px; line-height: 1.55; color: var(--color-neutral-800); }
.mkt-body { font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); }
.mkt-fine { font-size: 13px; color: var(--color-neutral-700); }
.mkt-note { font-size: 15px; color: var(--color-neutral-700); }

/* Kicker / eyebrow — an uppercase label. The leading hairline rule that used to
   sit before it was dropped site-wide, so this is a plain block now. */
.mkt-kicker { margin-bottom: var(--space-6); }
.mkt-kicker > span {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.mkt-kicker-plain {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
/* Kicker on the dark steel field */
.mkt-dark .mkt-kicker > span { color: var(--color-accent-300); }

/* ── Sections ───────────────────────────────────────────────────────────── */
/* Sections are separated by alternating ground colour, not by a rule. Order
   down the page: hero white → problem tint → ablauf dark → funktionen tint
   → preis white → faq tint → cta white → footer dark.
   The rule behind that order: cards and accordion panels are plain white, so a
   section holding a *grid* of them is tinted. Preis is white even though it
   holds a panel — that panel is a single 768px object with a tinted right half,
   so it defines itself.
   --sec-bg republishes each ground for the hairline-grid trick further down
   (a grid whose 1px gaps show a divider-coloured parent through ground-coloured
   cells — those cells have to match the section, not the page). */
.mkt-section,
.mkt-section-plain {
  padding: calc(var(--space-8) * 2.4) var(--space-6);
}
.mkt-hero { padding: calc(var(--space-8) * 2.6) var(--space-6) calc(var(--space-8) * 2); }

.mkt-sec-light { --sec-bg: var(--color-card); background: var(--sec-bg); }
.mkt-sec-tint  { --sec-bg: var(--color-bg);   background: var(--sec-bg); }

/* The dark steel field — Ablauf + footer */
.mkt-dark {
  background: var(--color-accent-900);
  color: var(--color-neutral-100);
}
/* Ablauf carries a slight gradient — lifted at the top-left, settling into the
   flat accent-900 by the bottom, so the field has some depth without reading as
   a coloured panel. The footer stays flat so the two dark blocks don't compete. */
.mkt-dark-gradient {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(148, 188, 227, 0.13) 0%, rgba(148, 188, 227, 0) 62%),
    linear-gradient(168deg, #26394d 0%, #1f303f 46%, var(--color-accent-900) 100%);
}
.mkt-dark h1, .mkt-dark h2, .mkt-dark h3 { color: var(--color-neutral-100); }
.mkt-dark .mkt-body, .mkt-dark .mkt-lead { color: var(--color-accent-200); }

/* Anchor offset so sticky-header + smooth-scroll lands correctly */
.mkt [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* ── Grids ──────────────────────────────────────────────────────────────── */
.mkt-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: calc(var(--space-8) * 1.8);
  align-items: center;
}
/* Section header row: H2 left, lead pushed hard right and right-aligned, both
   sitting on the same baseline. Used by #problem, #funktionen and #faq. */
.mkt-headrow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: calc(var(--space-8) * 1.6);
  align-items: end;
  margin-bottom: calc(var(--space-8) * 1.6);
}
.mkt-headrow .mkt-lead {
  max-width: 56ch;
  justify-self: end;   /* the 56ch cap leaves slack in the column — pin it right */
  text-align: right;
}
.mkt-headrow-faq { margin-bottom: calc(var(--space-8) * 1.4); }
/* Ablauf heading sits tighter than a normal section head */
.mkt-flow-heading { max-width: 26ch; margin-bottom: calc(var(--space-8) * 1.8); }
.mkt-split-even {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--space-8) * 1.8);
  align-items: start;
}
.mkt-split-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: calc(var(--space-8) * 1.8);
  align-items: center;
}
.mkt-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.mkt-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.mkt-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.mkt-card {
  background: var(--color-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mkt-card-tight { gap: var(--space-2); }
/* Deliberately no lift on hover: these cards are not clickable, and a translate
   would promise otherwise. Just a firmer edge. */
.mkt-card {
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.mkt-card:hover { border-color: rgba(29, 31, 32, 0.3); }
.mkt-card-pad { padding: calc(var(--space-8) * 1.2); }
/* Card eyebrow: an icon tile rather than a numeral or a label. Same tile as the
   priced rows in the calculator, so the whole page uses one icon treatment. */
.mkt-card-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  font-size: 17px;
  border-radius: 10px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  margin-bottom: var(--space-1);
}
.mkt-card h3 { font-size: 22px; }
.mkt-card-tight h3 { font-size: 21px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.mkt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 16px; line-height: 1.2;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.mkt-btn-sm { font-size: 14px; padding: var(--space-2) var(--space-4); }
.mkt-btn.mkt-btn-primary {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: #ffffff;
}
.mkt-btn.mkt-btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #ffffff; }
.mkt-btn.mkt-btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.mkt-btn.mkt-btn-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--color-text);
}
.mkt-btn.mkt-btn-secondary:hover { background: rgba(29, 31, 32, 0.07); color: var(--color-text); }
.mkt-btn-secondary:active { background: rgba(29, 31, 32, 0.14); }
/* Closing CTA: the secondary reads in brand blue next to the filled primary.
   accent-700 (#416180) rather than #7098BF — the latter is 2.71:1 on this ground
   and fails AA outright. This is the handoff's stated rule for accent text. */
.mkt-cta .mkt-btn-secondary,
.mkt-cta .mkt-btn-secondary:hover { color: var(--color-accent-700); }
.mkt-btn-block { width: 100%; }
.mkt-btn:disabled,
.mkt-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* "Zur App" in the footer brand cell: solid white, near-black label (21:1).
   Its own variant rather than .mkt-dark .mkt-btn-primary, which tints the label
   accent-900 — the ask was black text. */
.mkt-btn.mkt-btn-app {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  padding: var(--space-2) var(--space-4);
}
.mkt-btn.mkt-btn-app:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-200);
  color: var(--color-text);
}
.mkt-btn.mkt-btn-app:active { background: var(--color-neutral-300); border-color: var(--color-neutral-300); }
.mkt-btn.mkt-btn-app svg { flex: none; transition: transform 0.16s ease; }
.mkt-btn.mkt-btn-app:hover svg { transform: translateX(3px); }

/* Inverted pair for the dark field */
.mkt-dark .mkt-btn-primary {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-100);
  color: var(--color-accent-900);
}
.mkt-dark .mkt-btn-secondary {
  border-color: var(--color-accent-600);
  color: var(--color-accent-200);
}
.mkt-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Tag pill ───────────────────────────────────────────────────────────── */
.mkt-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.mkt-header {
  position: sticky; top: 0; z-index: 50;
  /* Matches the white hero it sits over. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  /* The hairline fades in once the page has scrolled past the hero's first
     screenful — at the top the header should read as part of the hero, and only
     needs an edge once content is passing underneath it. marketing.js
     (initHeader) sets data-mkt-scrolled at 200px.
     The border is always 1px and only its colour changes: animating the width
     would move every section down by a pixel mid-scroll. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease;
}
.mkt-header[data-mkt-scrolled] { border-bottom-color: var(--color-divider); }
/* The contact page's header does not stick, so it has nothing to be translucent
   over — and 92 % white over the page tint left a faint seam against that page's
   white ground. Opaque. It also never gets a scrolled state, so it keeps the
   hairline that separates it from the page for good. */
.mkt-header-static {
  position: static; backdrop-filter: none;
  background: var(--color-card);
  border-bottom-color: var(--color-divider);
}
/* The max-width has to include the horizontal padding, otherwise the header's
   inner content sits ~20px narrower than every section below it (sections pad
   first, then cap an inner wrap at --wrap). */
.mkt-header-row {
  max-width: calc(var(--wrap) + var(--space-6) * 2); margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
}
.mkt-drawer > nav {
  max-width: calc(var(--wrap) + var(--space-6) * 2); margin: 0 auto;
}
.mkt-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--color-text); margin-right: auto;
}
.mkt-brand:hover { color: var(--color-text); }
/* 34px, up from 26. The row's height is set by the CTA button (32px) and, on
   mobile, by the burger (36px), so the logo can grow this far and only costs the
   header a single pixel. The width/height attributes on the tag track this. */
.mkt-brand img { height: 34px; width: auto; }
.mkt-nav { display: flex; align-items: center; gap: var(--space-6); }
.mkt-nav a {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 15px; letter-spacing: 0.01em;
  text-decoration: none; color: var(--color-text);
}
.mkt-nav a:hover { color: #7098bf; }
.mkt-header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* DE / EN segmented control — a real locale switcher.
   align-self: stretch instead of a fixed height, so it always matches the
   tallest thing in the actions row (the CTA on desktop, the burger on mobile)
   without hard-coding either one's box model. */
.mkt-seg {
  display: inline-flex; align-self: stretch; overflow: hidden;
  /* Floor = .mkt-btn-sm's computed box (14px × 1.2 line-height + its vertical
     padding + borders). Needed because the contact-page header has no CTA and
     hides the burger, so `stretch` would collapse this to its 18px content. */
  min-height: calc(14px * 1.2 + var(--space-2) * 2 + 2px);
  border: 1px solid var(--color-divider); border-radius: var(--radius);
}
.mkt-seg-opt {
  display: inline-flex; align-items: center;
  padding: 2px 9px; font-size: 12px; line-height: 1;
  font-family: var(--font-heading); font-weight: 500;
  background: transparent; border: 0; color: var(--color-text);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.mkt-seg-opt + .mkt-seg-opt { border-left: 1px solid var(--color-divider); }
.mkt-seg-opt:hover { background: rgba(29, 31, 32, 0.07); color: var(--color-text); }
.mkt-seg-opt[aria-current="true"] {
  background: var(--color-accent-cta); color: #ffffff; cursor: default;
}
.mkt-seg-opt[aria-current="true"]:hover { background: var(--color-accent-cta); }
.mkt-seg form { display: contents; }

/* Mobile nav toggle + drawer */
.mkt-burger {
  display: none;
  width: 36px; height: 36px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: var(--radius); cursor: pointer; color: var(--color-text);
}
.mkt-burger svg { display: block; }
.mkt-drawer {
  display: none;
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
  padding: var(--space-4) var(--space-4) var(--space-6);
}
.mkt-drawer[data-open="true"] { display: block; }
.mkt-drawer nav { display: flex; flex-direction: column; gap: var(--space-1); }
/* :not(.mkt-btn) matters — the drawer's last child is the primary CTA, and this
   descendant selector (0,2,1) would otherwise outrank .mkt-btn-primary (0,1,0)
   and repaint its label dark. Same trap as `.mkt a`; see the note there. */
.mkt-drawer nav a:not(.mkt-btn) {
  font-family: var(--font-heading); font-weight: 500; font-size: 17px;
  text-decoration: none; color: var(--color-text);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.mkt-drawer .mkt-btn { margin-top: var(--space-4); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.mkt-hero h1 { max-width: 19ch; margin-bottom: var(--space-6); }
.mkt-hero .mkt-lead-hero { max-width: 44ch; margin-bottom: var(--space-8); }
.mkt-hero-figure { display: flex; align-items: center; justify-content: center; }
/* Transparent mockups sit directly on the ground — no radius, border or shadow */
.mkt-hero-figure img,
.mkt-figure-plain img { border-radius: 0; }
.mkt-figure-plain { display: flex; justify-content: center; }
.mkt-figure-plain img { width: 100%; max-width: 1080px; }

/* ── Ablauf steps — hairline grid on the dark field ─────────────────────── */
/* A hairline rule top and bottom, with the grid inset from both so the numerals
   and the copy are not crowded against them. */
.mkt-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--color-accent-600);
  border-bottom: 1px solid var(--color-accent-600);
  padding-block: var(--space-6);
}
.mkt-steps > li {
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--color-accent-600);
}
.mkt-steps > li:first-child { padding-left: 0; }
.mkt-steps > li:last-child { padding-right: 0; border-right: 0; }
.mkt-step-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 56px; line-height: 1;
  color: var(--color-accent-400);
  margin-bottom: var(--space-4);
}
.mkt-steps h3 { font-size: 23px; margin-bottom: var(--space-3); }
.mkt-steps p { font-size: 15px; line-height: 1.55; color: var(--color-accent-200); }
.mkt-closer {
  margin-top: calc(var(--space-8) * 1.4);
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--color-neutral-100);
}

/* ── Dienstleistungen ─────────────────────────────────────────────────────
   Free text, then the list of what is included, then the mockup — stacked. Set
   beside each other the short paragraph left a wide empty column to its right. */
.mkt-services-prose {
  max-width: 68ch;
  margin-bottom: calc(var(--space-8) * 1.6);
}
/* Carries .mkt-lead in the markup — same size, weight and colour as every other
   lead on the page. This rule only sets the measure and the spacing. */
.mkt-services-claim { max-width: 62ch; }
.mkt-services-label { display: block; margin-bottom: var(--space-4); }
.mkt-services-grid { gap: var(--space-4); }
.mkt-services-note {
  margin-top: var(--space-4);
  margin-bottom: calc(var(--space-8) * 2.2);
  font-size: 14px; color: var(--color-neutral-700);
}

/* ── Warum myfairs · Problem → Lösung ───────────────────────────────────────
   The answer is set off from the situation above it by a hairline and the accent
   label, so the pair reads as one movement rather than two paragraphs. */
.mkt-solution {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.mkt-solution-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-1);
}
.mkt-solution-label .mkt-icon { font-size: 10px; }
.mkt-solution-body { font-size: 15px; line-height: 1.5; color: var(--color-text); }

/* ── Funktionen ─────────────────────────────────────────────────────────── */
.mkt-features-grid { margin-bottom: calc(var(--space-8) * 3); }
.mkt-roadmap {
  margin-top: calc(var(--space-8) * 1.4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: 15px; color: var(--color-neutral-700);
}

/* ── Icons ──────────────────────────────────────────────────────────────────
   Inlined FontAwesome Free 6 solid sprites (see MarketingHelper#mkt_icon).
   Sized off the font-size of the element they sit in and coloured by
   currentColor, so an icon never needs its own rule to match its label.
   `width: auto` is load-bearing: the FA viewBoxes are not square (users is
   640×512), and pinning both axes to 1em would squash them. */
.mkt-icon {
  display: block; flex: none;
  height: 1em; width: auto;
  fill: currentColor;
}

/* ── Preis — the calculator ─────────────────────────────────────────────────
   Two panels inside one bordered box: the parameters on the left, the result on
   the right. Everything is server-rendered for the default setup (monthly,
   3 users, no add-on); marketing.js only recomputes.

   The box is held at a fixed 768px so that switching the billing cycle or
   ticking a module — which adds and removes summary rows — cannot resize the
   section under the reader. */
.mkt-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  min-height: 768px;
  background: var(--color-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mkt-calc-config {
  padding: calc(var(--space-8) * 1.2);
  display: flex; flex-direction: column;
}
/* Parameter groups are separated by the same hairline the deflists and the
   Ablauf grid use, and spread over the panel's fixed height rather than
   clustering at the top. */
.mkt-calc-block + .mkt-calc-block {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.mkt-calc-fieldset { border: 0; padding: 0; margin: 0; }

/* The output panel takes the blueprint gradient the cards on the white sections
   use — the same "pale steel paper" ground, so the result side reads as part of
   the system rather than as a separate widget. */
.mkt-calc-summary {
  padding: calc(var(--space-8) * 1.2);
  border-left: 1px solid var(--bp-edge);
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, var(--bp-top) 0%, var(--bp-bottom) 100%);
  box-shadow: var(--bp-sheen);
}

.mkt-calc-subhead {
  font-size: 19px; letter-spacing: -0.01em;
  margin: 0 0 var(--space-4); padding: 0;
}

/* Billing cycle — the header's DE/EN switcher vocabulary: one bordered box,
   the options divided by a hairline, the active one filled. The radios stay in
   the DOM for keyboard and form semantics; the adjacent span is the control. */
.mkt-calc-seg {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  overflow: hidden;
}
.mkt-calc-seg-opt { cursor: pointer; display: inline-flex; }
.mkt-calc-seg-opt + .mkt-calc-seg-opt { border-left: 1px solid var(--color-divider); }
.mkt-calc-seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.mkt-calc-seg-opt > span {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-heading); font-weight: 500; font-size: 15px;
  padding: var(--space-2) var(--space-6);
  transition: background-color 0.14s ease, color 0.14s ease;
}
.mkt-calc-seg-opt:hover > span { background: rgba(29, 31, 32, 0.06); }
.mkt-calc-seg-opt input:checked ~ span {
  background: var(--color-accent-cta); color: #ffffff; font-weight: 600;
}
.mkt-calc-seg-opt input:focus-visible ~ span {
  outline: 2px solid var(--color-accent); outline-offset: -2px;
}
.mkt-calc-seg-badge { font-weight: 600; font-size: 13px; opacity: 0.9; }

/* Priced line item — icon tile, name, unit price */
.mkt-calc-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.mkt-calc-item .mkt-calc-subhead { margin-bottom: 2px; }
.mkt-calc-item-text { min-width: 0; }
.mkt-calc-tile {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  font-size: 16px;
  border-radius: 10px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.mkt-calc-unit { font-size: 14px; color: var(--color-neutral-700); }

/* Slider. The filled portion of the track is driven by --mkt-fill, which the
   server sets inline for the default value and the JS keeps in step — a range
   input gives no ::-webkit-slider-progress to style cross-browser. */
.mkt-calc-slider-row {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6);
}
.mkt-calc-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 20px;
  background: transparent; cursor: pointer;
}
.mkt-calc-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-accent-cta) 0 var(--mkt-fill, 0%),
    var(--color-neutral-300) var(--mkt-fill, 0%) 100%
  );
}
.mkt-calc-slider::-moz-range-track {
  height: 4px; border-radius: 999px; background: var(--color-neutral-300);
}
.mkt-calc-slider::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--color-accent-cta);
}
/* Round thumb, matching the radio dots in the contact form rather than the
   square handles of a spreadsheet. */
.mkt-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border: 3px solid var(--color-card); border-radius: 50%;
  background: var(--color-accent-cta);
  box-shadow: 0 1px 4px rgba(29, 45, 61, 0.45);
}
.mkt-calc-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--color-card); border-radius: 50%;
  background: var(--color-accent-cta);
  box-shadow: 0 1px 4px rgba(29, 45, 61, 0.45);
}
.mkt-calc-number {
  width: 78px; flex: none;
  padding: 7px 8px;
  font: inherit; font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  text-align: center; font-variant-numeric: tabular-nums;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.mkt-calc-number:hover { border-color: rgba(29, 31, 32, 0.45); }
.mkt-calc-number:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.mkt-calc-hint { margin-top: var(--space-3); font-size: 13px; color: var(--color-neutral-700); }

/* Add-on rows. The whole row is the label, so the entire card is the hit area.
   :has() paints the selected state; where it is unsupported the checked tick
   (a sibling selector) is still the cue. */
.mkt-calc-addons { display: flex; flex-direction: column; gap: var(--space-3); }
.mkt-calc-addon {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.mkt-calc-addon:hover { border-color: rgba(29, 31, 32, 0.34); }
.mkt-calc-addon:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
/* Announced, not bookable yet: greyed back and explicitly not clickable. 0.6 is
   as far as it can go and keep the copy legible — the row is still information,
   not decoration. */
.mkt-calc-addon:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.mkt-calc-addon:has(input:disabled):hover { border-color: var(--color-divider); }
.mkt-calc-addon input:disabled ~ .mkt-calc-check {
  border-style: dashed;
  background: var(--color-neutral-100);
}
.mkt-calc-addon-name .mkt-tag {
  margin-left: 7px;
  font-family: var(--font-body); font-weight: 400;
  vertical-align: 2px;
}
.mkt-calc-addon input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
/* Square indicator, like the consent checkbox on the contact form. */
.mkt-calc-check {
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px;
  font-size: 10px;
  border: 1.5px solid var(--color-divider);
  color: #ffffff;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.mkt-calc-check .mkt-icon-check { opacity: 0; }
.mkt-calc-addon input:checked ~ .mkt-calc-check {
  background: var(--color-accent); border-color: var(--color-accent);
}
.mkt-calc-addon input:checked ~ .mkt-calc-check .mkt-icon-check { opacity: 1; }
.mkt-calc-addon input:focus-visible ~ .mkt-calc-check {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.mkt-calc-addon .mkt-calc-item-text { flex: 1; display: block; }
.mkt-calc-addon-name {
  display: block;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
}
.mkt-calc-addon-desc {
  display: block; font-size: 13px; line-height: 1.4;
  color: var(--color-neutral-700);
}
.mkt-calc-addon-price { flex: none; text-align: right; }
.mkt-calc-addon-price b {
  display: block;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.mkt-calc-addon-price span { font-size: 12px; color: var(--color-neutral-700); }

/* The answer first: total at the top of the panel, breakdown underneath. */
.mkt-calc-total { padding-bottom: var(--space-8); }
.mkt-calc-total-amount {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(46px, 4.8vw, 72px); line-height: 0.94;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1);
}
.mkt-calc-avg,
.mkt-calc-saving { font-size: 14px; margin-top: var(--space-2); }
.mkt-calc-avg { color: var(--bp-ink); }
.mkt-calc-saving { color: var(--color-accent-700); font-weight: 500; }
.mkt-calc-saving[hidden] { display: none; }

/* Breakdown lines. Both columns read top-down; the panel's spare height (it is
   pinned to 768px) collects at the bottom, above the CTA. */
.mkt-calc-lines {
  display: flex; flex-direction: column; margin: 0;
  border-top: 1px solid var(--bp-edge);
}
.mkt-calc-lines > div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bp-edge);
  font-size: 15px;
}
.mkt-calc-lines > div[hidden] { display: none; }
.mkt-calc-lines dt {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; color: var(--bp-ink);
}
.mkt-calc-lines dt .mkt-icon { color: var(--color-accent-600); }
.mkt-calc-lines dd {
  margin: 0; text-align: right;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.mkt-calc-line-discount dt,
.mkt-calc-line-discount dd { color: var(--color-accent-700); }
/* The annual figure closes the block: firmer rule above it, none below. Written
   as a child selector so it out-specifies `.mkt-calc-lines > div` (0,1,1) on
   the border-bottom rather than needing !important. */
.mkt-calc-lines > .mkt-calc-line-yearly {
  border-bottom: 0;
  border-top: 1px solid var(--bp-edge-strong);
  margin-top: -1px;
}
.mkt-calc-line-yearly dt { font-weight: 500; }

/* Pins the CTA to the bottom of the panel, so it holds its place while the
   rows above it come and go. */
.mkt-calc-summary .mkt-btn { margin-top: auto; }
.mkt-calc-summary .mkt-btn .mkt-icon { font-size: 14px; transition: transform 0.16s ease; }
.mkt-calc-summary .mkt-btn:hover .mkt-icon { transform: translateX(3px); }
.mkt-calc-fine {
  margin-top: var(--space-3);
  font-size: 13px; line-height: 1.5;
  color: var(--color-neutral-700);
}

/* Terms strip under the calculator — the hairline-cross grid */
.mkt-calc-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--color-divider);
  margin: calc(var(--space-8) * 1.4) 0 0;
}
/* Cells take the section's own ground so the 1px gaps read as hairlines rather
   than as a stripe of a different grey. */
.mkt-calc-facts > div { background: var(--sec-bg, var(--color-bg)); padding: var(--space-4); }
.mkt-calc-facts dt {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.mkt-calc-facts dd {
  margin: 0;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  line-height: 1.25;
}

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.mkt-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.mkt-faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mkt-faq-q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6);
  text-align: left;
  background: transparent; border: 0;
  padding: var(--space-6);
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 21px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-text);
}
.mkt-faq-icon {
  flex: none;
  font-family: var(--font-body); font-size: 24px; line-height: 1.1;
  color: var(--color-accent-700);
  transition: transform 0.18s ease;
}
.mkt-faq-q[aria-expanded="true"] .mkt-faq-icon { transform: rotate(45deg); }

/* Same white card as the Problem and Funktionen panels. The question row is a
   real button, so it gets a hover tint; the open item takes a firmer edge, which
   is the only cue besides the rotated glyph that says which one is open. */
.mkt-faq-q { transition: background-color 0.14s ease; }
.mkt-faq-q:hover { background: rgba(29, 31, 32, 0.05); }
/* :has() lets the open state live in CSS instead of a JS-toggled class.
   Where it is unsupported the item simply keeps its resting edge. */
.mkt-faq-item:has(.mkt-faq-q[aria-expanded="true"]) {
  border-color: rgba(29, 31, 32, 0.3);
}
.mkt-faq-item:has(.mkt-faq-q[aria-expanded="true"]) .mkt-faq-q:hover {
  background: transparent;
}

/* Animated panel. The outer element owns the height transition and clips; the
   inner element owns the padding, so the collapsed state can reach a true 0
   height (padding on the animated box would leave a residual stripe).
   JS drives max-height in px — server-rendered markup carries no inline style,
   so with JS off every answer is simply open. */
.mkt-faq-a {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.mkt-faq-a[data-open="false"] { max-height: 0; opacity: 0; }
.mkt-faq-a[hidden] { display: none; }
.mkt-faq-a > div { padding: 0 var(--space-8) var(--space-6) var(--space-6); max-width: 82ch; }
.mkt-faq-a p { font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }

.mkt-faq-closer { margin-top: calc(var(--space-8) * 2.4); font-size: 15px; color: var(--color-neutral-700); }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
.mkt-cta h2 { max-width: 24ch; margin-bottom: var(--space-6); }
.mkt-cta .mkt-lead { max-width: 50ch; margin-bottom: var(--space-8); }
.mkt-cta-figure { display: flex; align-items: center; justify-content: center; }
.mkt-cta-figure img { width: 100%; max-width: 520px; border-radius: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.mkt-footer {
  background: var(--color-accent-900);
  color: var(--color-accent-200);
  /* The corporate blue as a band where the light page meets the dark footer. */
  border-top: 3px solid var(--color-brand);
  padding: calc(var(--space-8) * 1.8) var(--space-6) var(--space-8);
}
/* Two items, space-between: brand cell left, the grouped link lists flush right.
   Flex rather than a grid because the lists should hug the right edge at their
   intrinsic width instead of sitting in fixed tracks. */
.mkt-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: calc(var(--space-8) * 1.4);
  border-bottom: 1px solid var(--color-accent-700);
}
.mkt-footer-links { display: flex; gap: 24px; }
.mkt-footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: var(--space-4); }
.mkt-footer-brand img { height: 38px; width: auto; }
.mkt-footer-blurb { font-size: 14px; max-width: 34ch; margin-bottom: var(--space-6); }
.mkt-footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.mkt-footer-col > span {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-400);
}
.mkt-footer-col a {
  font-size: 14px; color: var(--color-accent-200); text-decoration: none;
  transition: color 0.14s ease;
}
.mkt-footer-col a:hover { color: var(--color-neutral-100); }
.mkt-footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-6);
  font-size: 13px;
}

/* ── Kontakt page ───────────────────────────────────────────────────────── */
/* White ground. The form panel is white too and carries its own hairline and
   shadow — same call as the calculator on the white Preis section: one large
   object defines itself, a grid of small cards would not. */
.mkt-contact-main {
  flex: 1;
  --sec-bg: var(--color-card);
  background: var(--sec-bg);
  padding: calc(var(--space-8) * 2.2) var(--space-6);
}
.mkt-contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: calc(var(--space-8) * 2);
  align-items: start;
}
.mkt-contact-h1 {
  font-size: clamp(34px, 3.8vw, 54px); line-height: 1.04;
  max-width: 18ch; margin-bottom: var(--space-6);
}
.mkt-contact-lead {
  font-size: 18px; line-height: 1.55; color: var(--color-neutral-800);
  max-width: 44ch; margin-bottom: var(--space-8);
}
/* The Ablauf steps, vertical: markers threaded on a rail in the corporate blue.
   Replaces the boxed step card — on a white ground a card there competed with
   the form panel opposite it for the same attention. */
.mkt-vflow-block { margin-bottom: var(--space-8); }
.mkt-vflow-block > .mkt-kicker-plain { display: block; margin-bottom: var(--space-6); }
.mkt-vflow { display: flex; flex-direction: column; }
.mkt-vflow > li {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.mkt-vflow > li:last-child { padding-bottom: 0; }
/* The rail runs from under one marker to the next and fades downward, so the
   sequence reads as continuing rather than stopping at a hard stub. */
.mkt-vflow > li:not(:last-child)::before {
  content: "";
  position: absolute; left: 16px; top: 38px; bottom: 2px; width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-brand) 0%,
    rgba(112, 152, 191, 0.28) 100%
  );
}
.mkt-vflow-num {
  position: relative; z-index: 1;          /* paints over the rail */
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  background: var(--color-card);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  /* Dark numeral, not white-on-brand: see the note on --color-brand. */
  color: var(--color-accent-800);
}
.mkt-vflow p {
  padding-top: 6px;
  font-size: 15px; line-height: 1.5; color: var(--color-neutral-800);
}

.mkt-reach {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mkt-reach > span:first-child { color: var(--color-neutral-700); }
/* Icon column: every line hangs off the same 22px gutter, mail and phone at
   heading size, the two static lines smaller. */
.mkt-reach a,
.mkt-reach-line {
  display: flex; align-items: baseline; gap: var(--space-3);
}
.mkt-reach a {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 22px; text-decoration: none;
}
/* --color-accent (4.14:1 on white), not --color-brand (2.66:1): these icons sit
   next to the datum they mark, so they are decorative rather than meaningful
   graphics, but there is no reason to ship them under the 3:1 floor. */
.mkt-reach a .mkt-icon { font-size: 16px; color: var(--color-accent); }
.mkt-reach a:hover .mkt-icon { color: var(--color-accent-700); }
.mkt-reach-line {
  margin-top: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-700);
}
.mkt-reach-line .mkt-icon { font-size: 13px; color: var(--color-accent); }
/* Optical alignment: `baseline` puts a block-level SVG on the text baseline, so
   it needs nudging down onto the x-height instead. */
.mkt-reach .mkt-icon { transform: translateY(1px); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.mkt-form-card h2 { font-size: 26px; margin-bottom: var(--space-2); }
.mkt-form-intro { margin-bottom: var(--space-8); font-size: 14px; color: var(--color-neutral-700); }
.mkt-field { display: block; }
.mkt-field > label,
.mkt-fieldset > legend {
  display: block; font-size: 12px; margin-bottom: 5px; padding: 0;
  color: rgba(29, 31, 32, 0.7);
}
.mkt-input {
  width: 100%; min-height: 36px; padding: 6px 10px;
  font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.mkt-input:hover { border-color: rgba(29, 31, 32, 0.45); }
.mkt-input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
/* Draggable between 128 and 384px — tall enough to be worth typing into, capped
   so it cannot push the submit button off a laptop screen. */
textarea.mkt-input { min-height: 128px; max-height: 384px; resize: vertical; }
select.mkt-input { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d5d60' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.mkt-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.mkt-field-block { margin-bottom: var(--space-6); }
.mkt-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); }
.mkt-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mkt-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.mkt-radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mkt-radio .mkt-dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.mkt-radio:hover .mkt-dot { border-color: var(--color-accent); }
.mkt-radio input:checked + .mkt-dot {
  border-color: var(--color-accent); background: var(--color-accent);
  /* The ring is punched out of the card the radio sits on, not out of the page
     ground — these controls only ever appear inside the white form card. */
  box-shadow: inset 0 0 0 4px var(--color-card);
}
.mkt-radio input:focus-visible + .mkt-dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Consent checkbox — square by design */
.mkt-consent {
  align-items: flex-start; margin-bottom: var(--space-6);
  font-size: 13px; line-height: 1.5;
}
.mkt-consent .mkt-dot { margin-top: 2px; border-radius: 0; }
.mkt-submit-fine {
  margin-top: var(--space-3); font-size: 13px;
  color: var(--color-neutral-700); text-align: center;
}
/* Sits inside the submit button; lifts on hover the same way the arrows do. */
.mkt-icon-send { font-size: 14px; transition: transform 0.16s ease; }
.mkt-btn:hover .mkt-icon-send { transform: translateX(3px); }

/* Inline validation — styled from the accent ramp, never browser defaults */
.mkt-error {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.4;
  color: #a4342c;
}
.mkt-input[aria-invalid="true"] { border-color: #a4342c; }
.mkt-form-alert {
  margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4);
  border: 1px solid #a4342c; border-left-width: 3px;
  border-radius: var(--radius);
  background: #fbf1f0; color: #7d2720;
  font-size: 14px; line-height: 1.5;
}
.mkt-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Proof-of-work status. Quiet by design — it reports on something the visitor
   never has to do, so it must not read as another form step. */
.mkt-captcha {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--space-4);
  font-size: 12px; line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mkt-captcha-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 30%, transparent);
  transition: background .2s ease;
}
/* Pulses only while hashing; stops as soon as the challenge is solved. */
@media (prefers-reduced-motion: no-preference) {
  .mkt-captcha:not(.is-done):not(.is-failed) .mkt-captcha-dot { animation: mkt-captcha-pulse 1s ease-in-out infinite; }
}
@keyframes mkt-captcha-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.mkt-captcha.is-done .mkt-captcha-dot { background: #2f7a4d; }
.mkt-captcha.is-failed .mkt-captcha-dot { background: #a4342c; }
.mkt-captcha.is-failed { color: #7d2720; }

/* Success state — replaces the card body */
.mkt-form-success {
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 420px; justify-content: center;
}
.mkt-success-mark {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-size: 24px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.mkt-form-success h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.06; max-width: 20ch; }
.mkt-form-success p { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); max-width: 44ch; }

/* ── Legal pages (imprint / privacy) — new chrome, untouched copy ────────── */
.mkt-legal { padding: calc(var(--space-8) * 2.2) var(--space-6) calc(var(--space-8) * 2.4); }
/* No max-width: the block uses the same 1240px .mkt-wrap as every landing
   section, so its left edge lines up with the navbar and the section headings.
   (A narrower measure reads better for long legal prose — see the note in the
   handoff — but matching the page grid was the explicit ask.) */
.mkt-legal-body h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; margin-bottom: var(--space-6); }
.mkt-legal-body h2 { font-size: 24px; margin: calc(var(--space-8) * 1.2) 0 var(--space-3); }
.mkt-legal-body h3 { font-size: 19px; margin: var(--space-6) 0 var(--space-2); }
.mkt-legal-body h4 { font-size: 16px; margin: var(--space-4) 0 var(--space-1); }
.mkt-legal-body p { margin-bottom: var(--space-3); font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); }
.mkt-legal-body ul { list-style: disc; padding-left: 1.3em; margin-bottom: var(--space-3); }
.mkt-legal-body li { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin-bottom: var(--space-1); }
.mkt-legal-body strong { color: var(--color-text); }

/* ── Scroll reveal ───────────────────────────────────────────────────────────
   Section contents rise into place as they enter the viewport; grids stagger
   their children. marketing.js (initReveal) only adds .is-revealed — the timing
   and the distances live here.

   Two gates, and both matter:

   `scripting: enabled` keeps the pre-hidden state away from a no-JS visitor
   entirely. The alternative — a class the script adds on boot — arrives after
   first paint, so the page would flash its content and then hide it. The cost of
   this approach is that a visitor whose JS is on but whose script fails to load
   sees nothing below the hero; that same failure already flattens the FAQ and
   the calculator, so it is not a new single point of failure.

   `prefers-reduced-motion: no-preference` means a reduced-motion visitor never
   has anything hidden in the first place, so nothing has to be revealed.

   Animations, not transitions: the cards already own a `transition` (border and
   shadow on hover) and a second declaration on the same element would clobber
   it. `both` holds the final frame, so the end state survives the animation. */
@keyframes mkt-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mkt [data-mkt-reveal],
  .mkt [data-mkt-stagger] > * { opacity: 0; }

  .mkt [data-mkt-reveal].is-revealed,
  .mkt [data-mkt-stagger].is-revealed > * {
    animation: mkt-rise 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Grid children follow each other ~70ms apart. Six is the longest grid on the
     page (Funktionen); the FAQ list is not staggered — each item is its own
     target, so a ten-item list does not end up animating off-screen. */
  .mkt [data-mkt-stagger].is-revealed > :nth-child(2) { animation-delay: 70ms; }
  .mkt [data-mkt-stagger].is-revealed > :nth-child(3) { animation-delay: 140ms; }
  .mkt [data-mkt-stagger].is-revealed > :nth-child(4) { animation-delay: 210ms; }
  .mkt [data-mkt-stagger].is-revealed > :nth-child(5) { animation-delay: 280ms; }
  .mkt [data-mkt-stagger].is-revealed > :nth-child(6) { animation-delay: 350ms; }

  /* The two big figures and the calculator are heavy objects: a shade slower and
     a little further, so they settle rather than snap. */
  .mkt .mkt-figure-plain.is-revealed,
  .mkt .mkt-cta-figure.is-revealed,
  .mkt .mkt-calc.is-revealed { animation-duration: 0.8s; }
}

/* ── Responsive: ≤1040px ────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .mkt-split,
  .mkt-split-even,
  .mkt-split-cta,
  .mkt-headrow,
  .mkt-contact-split {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--space-8) * 1.2);
    align-items: start;
  }
  /* Single column: the lead now sits under a left-aligned H2, so right-aligning
     it would read as a mistake. */
  .mkt-headrow .mkt-lead { justify-self: start; text-align: left; }
  .mkt-g4,
  .mkt-g3,
  .mkt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Steps swap their vertical rule for a horizontal one */
  .mkt-steps > li {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-accent-600);
  }
  .mkt-steps > li:last-child { padding-right: var(--space-6); }
  /* Cap the mockup so it stops dominating between 1040 and 1240. min(…, 100%)
     is required: a bare 620px would *replace* the base `max-width: 100%` and
     overflow any viewport narrower than 620px. */
  .mkt-hero-figure img { max-width: min(620px, 100%); margin: 0 auto; }
  /* Calculator stacks: the result panel moves under the parameters, so its
     dividing hairline moves from its left edge to its top edge. The 768px floor
     goes with it — stacked, the content is taller than that anyway, and keeping
     it would only pad the parameters column out. */
  .mkt-calc { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mkt-calc-summary {
    border-left: 0;
    border-top: 1px solid var(--bp-edge);
  }
  /* Stacked, the CTA no longer has spare height above it to sit on. */
  .mkt-calc-lines { margin-bottom: var(--space-6); }
  .mkt-calc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Responsive: ≤760px ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mkt-nav,
  .mkt-header-actions .mkt-header-cta { display: none; }
  .mkt-burger { display: inline-flex; }
  .mkt-g4,
  .mkt-g3,
  .mkt-g2,
  .mkt-steps,
  .mkt-fields-2,
  .mkt-radio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mkt-section,
  .mkt-section-plain,
  .mkt-hero,
  .mkt-footer,
  .mkt-contact-main,
  .mkt-legal,
  .mkt-header-row,
  .mkt-drawer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .mkt-h1 { font-size: 34px; }
  .mkt-h2,
  .mkt-h2-lg { font-size: 27px; }
  .mkt-contact-h1 { font-size: 32px; }
  .mkt-faq-q { font-size: 19px; padding: var(--space-4); }
  /* Padding lives on the inner wrapper — the outer box is the animated one and
     must be able to collapse to a true zero height. */
  .mkt-faq-a > div { padding: 0 var(--space-4) var(--space-4); }
  .mkt-card-pad { padding: var(--space-6); }
  .mkt-calc-config,
  .mkt-calc-summary { padding: var(--space-6); }
  .mkt-calc-facts { grid-template-columns: minmax(0, 1fr); }
  /* Full-width billing options — two 50 % cells read as a control, two
     intrinsically-sized pills next to a full-bleed CTA read as an accident. */
  .mkt-calc-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .mkt-calc-seg-opt > span {
    width: 100%; justify-content: center;
    padding-left: var(--space-2); padding-right: var(--space-2);
  }
  /* Add-on row rewraps: tick, icon and name keep the first line, the price
     drops to its own line instead of squeezing the name into ~10ch. */
  .mkt-calc-addon { flex-wrap: wrap; }
  .mkt-calc-addon .mkt-calc-item-text { flex: 1 1 60%; }
  .mkt-calc-addon-price {
    flex: 1 1 100%;
    display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  }
  .mkt-steps > li:first-child,
  .mkt-steps > li:last-child { padding-left: 0; padding-right: 0; }
  .mkt-btn { width: 100%; }
  .mkt-btn-row { gap: var(--space-2); }
  /* Footer action stays intrinsically sized — it sits beside copy, not in a
     form, so stretching it across the column reads as a page-level CTA. */
  .mkt-btn.mkt-btn-app { width: auto; }
}

/* Respect a reduced-motion preference: no smooth scroll, no icon rotation tween */
@media (prefers-reduced-motion: reduce) {
  .mkt-header,
  .mkt-faq-icon,
  .mkt-btn,
  .mkt-btn.mkt-btn-app svg,
  .mkt-seg-opt,
  .mkt-calc-seg-opt > span,
  .mkt-calc-addon,
  .mkt-calc-check,
  .mkt-calc-summary .mkt-btn .mkt-icon,
  .mkt-icon-send,
  .mkt-footer-col a { transition: none; }
  .mkt-btn.mkt-btn-app:hover svg { transform: none; }
  .mkt-calc-summary .mkt-btn:hover .mkt-icon,
  .mkt-btn:hover .mkt-icon-send { transform: none; }
}