/* praxista.de in shadcn's look, 2026-11-03 (docs/product/website_ki_umstellung.md).

   Two layers:
   1. A theme layer that re-declares the variables of marketing.css (the
      T28 capture) with Praxista's shadcn values, so every page that still
      carries the capture's utility classes -- /ki/*, /rezeption, /kontakt --
      takes the same colours, type, radius and shadows.
   2. Components (`.site-*`, `.btn`, `.card`, ...) for the pages built
      fresh on them: the root, the shared nav and the shared footer.

   Values: packages/ui/src/styles/globals.css, the one theme of every React
   app (CLAUDE.md, Design system). Copied, not imported -- this service ships
   static files and has no build. Change a value there first, then here.
   No inline CSS anywhere: the CSP has no style-src. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url(/fonts/HankenGrotesk-wght.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Theme ─────────────────────────────────────────────────────────── */

:root {
  --radius: 0.75rem;
  --background: #ffffff;
  --foreground: #0f2438;
  --card: #ffffff;
  --card-foreground: #0f2438;
  --popover: #ffffff;
  --popover-foreground: #0f2438;
  --primary: #2a56c8;
  --primary-foreground: #ffffff;
  --secondary: #f5f7fb;
  --secondary-foreground: #0f2438;
  --muted: #f5f7fb;
  --muted-foreground: #3e5060;
  --accent: #e7eefd;
  --accent-foreground: #2a56c8;
  --border: #e3e7eb;
  --input: #838f9a;
  --ring: #0f2438;
  --success: #0e8c45;
  --success-tint: #bfedce;
  --success-text: #0a6b34;
  --neu-tint: #cedefd;
  --neu-text: #1b3e9e;
  --elev-card: 0 1px 1px rgba(20, 40, 94, 0.04), 0 2px 6px rgba(20, 40, 94, 0.05);
  --elev-raised: 0 1px 2px rgba(20, 40, 94, 0.05), 0 4px 12px rgba(20, 40, 94, 0.07);
  --elev-overlay: 0 2px 4px rgba(20, 40, 94, 0.06), 0 10px 26px rgba(20, 40, 94, 0.1);
  --elev-modal: 0 4px 8px rgba(20, 40, 94, 0.07), 0 22px 48px rgba(20, 40, 94, 0.14);
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* the capture's own names, mapped onto the theme */
  --brand-navy: var(--foreground);
  --brand-royal: var(--primary);
  --brand-bright: var(--primary);
  --brand-sky: var(--primary);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* The capture's gradient buttons become shadcn's solid primary. */
.gradient-accent,
.bg-gradient-to-r.from-brand-royal {
  background: var(--primary) !important;
  color: var(--primary-foreground);
}
.gradient-accent:hover,
.bg-gradient-to-r.from-brand-royal:hover { background: #2349ad !important; opacity: 1; }
.gradient-hero { background: radial-gradient(60% 50% at 50% 0%, var(--accent), transparent 70%); }
.shadow-card { box-shadow: var(--elev-card); border: 1px solid var(--border); }
.shadow-soft { box-shadow: var(--elev-raised); }
.shadow-elevated { box-shadow: var(--elev-overlay); }
.text-brand-navy { color: var(--foreground); }

/* The capture's buttons, fields and form cards in shadcn's sizes (Julius
   2026-11-04: „vor allem Buttons und wie sie aligned sind“). Before, three
   kinds of button stood on the site: .btn--lg (48px, 12px radius, 16px),
   the capture's pill (52px, fully round) and its form button (48px, 16px
   radius, 14px). Every call to action is now .btn--lg's shape -- shadcn's
   Button, rounded-lg at every size but sm. /ki/start's two options carry the
   same classes, so they stay identical (A/B parity). */
.gradient-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-sizing: border-box; height: 3rem; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 500 1rem/1 var(--font-sans); text-align: center; text-decoration: none; white-space: nowrap;
  box-shadow: var(--elev-card); cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.gradient-accent.w-full, .gradient-accent.block { display: flex; width: 100%; }
.gradient-accent:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5); }

/* Fields: shadcn's Input -- rounded-lg, the --input border (3:1 against the
   card, WCAG 1.4.11), the ring on focus, and the button's height so a field
   and the button under it line up. 16px text on a phone: iOS zooms into any
   field set smaller (shadcn: text-base md:text-sm). */
input.rounded-xl, select.rounded-xl, textarea.rounded-xl {
  box-sizing: border-box; border-radius: var(--radius); border-color: var(--input);
  font-size: 1rem;
}
input.rounded-xl, select.rounded-xl { height: 3rem; padding-top: 0; padding-bottom: 0; }
input.rounded-xl:focus, select.rounded-xl:focus, textarea.rounded-xl:focus {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5);
}
@media (min-width: 768px) {
  input.rounded-xl, select.rounded-xl, textarea.rounded-xl { font-size: 0.875rem; }
}

/* Cards: shadcn's Card radius (rounded-xl = --radius × 1.4), as .card on the root. */
.rounded-2xl { border-radius: calc(var(--radius) * 1.4); }

/* ── 2. Components ────────────────────────────────────────────────────── */

.site-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }
@media (min-width: 640px) { .site-container { padding: 0 1.5rem; } }

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

/* Button: shadcn's variants and sizes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1rem; box-sizing: border-box;
  border-radius: var(--radius); border: 1px solid transparent;
  font: 500 0.875rem/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn--lg { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }
/* shadcn: rounded-lg at every size, min(--radius-md, 12px) at sm */
.btn--sm { height: 2.25rem; padding: 0 0.875rem; border-radius: calc(var(--radius) * 0.8); }
.btn--block { display: flex; width: 100%; }
.btn--default { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--elev-card); }
.btn--default:hover { background: #2349ad; }
.btn--outline { background: var(--background); color: var(--foreground); border-color: var(--border); box-shadow: var(--elev-card); }
.btn--outline:hover { background: var(--secondary); }
.btn--ghost { background: transparent; color: var(--muted-foreground); }
.btn--ghost:hover { background: var(--secondary); color: var(--foreground); }
.btn--inverse { background: #ffffff; color: var(--primary); }
.btn--inverse:hover { background: var(--accent); }
.btn--inverse-outline { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.4); }
.btn--inverse-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); color: var(--muted-foreground);
  font-size: 0.8125rem; font-weight: 500; box-shadow: var(--elev-card);
}
.badge svg { width: 0.875rem; height: 0.875rem; }
.badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.badge--success { background: var(--success-tint); color: var(--success-text); border-color: transparent; box-shadow: none; }
.badge--neu { background: var(--neu-tint); color: var(--neu-text); border-color: transparent; box-shadow: none; }

/* Card */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4);
  box-shadow: var(--elev-card);
}

/* ── Nav: a floating pill (layout after via-health.de, Julius 2026-11-03) ── */
.site-nav {
  position: fixed; top: 0.75rem; left: 0; right: 0; z-index: 50;
  padding: 0 1rem; pointer-events: none;
}
.site-nav__bar {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 70rem; margin: 0 auto; height: 3.75rem; padding: 0 0.75rem 0 1.25rem; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--elev-raised);
}
.site-nav__logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--foreground); }
.site-nav__logo img { width: 1.75rem; height: 1.75rem; }
.site-nav__wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.site-nav__links { display: flex; align-items: center; gap: 0.25rem; }
/* On a phone only the Features menu stays (it is the one way to /rezeption); Kontakt is in the footer. */
.site-nav__links > a.site-nav__link { display: none; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 2.25rem; padding: 0 0.75rem;
  border-radius: calc(var(--radius) * 0.8); color: var(--muted-foreground);
  font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.site-nav__link:hover { background: var(--secondary); color: var(--foreground); }
.site-nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.site-nav__short { display: inline; }
.site-nav__long { display: none; }
@media (min-width: 420px) { .site-nav__short { display: none; } .site-nav__long { display: inline; } }
@media (min-width: 900px) { .site-nav__links > a.site-nav__link { display: inline-flex; } }
@media (max-width: 519px) { .site-nav__actions .btn--outline { display: none; } }

/* The "Features" menu, no script (CSP script-src 'none'). Until 2026-11-04 a
   <details>, which stayed open until „Features“ was clicked again; now it
   opens on hover and on focus (a tap focuses the tabindex'd trigger) and
   closes as soon as the pointer or the focus leaves it (Durchsicht Fund 5). */
.nav-menu { position: relative; }
.nav-menu__summary { outline: none; }
.nav-menu__chevron { width: 1rem; height: 1rem; transition: transform 0.15s; }
.nav-menu:hover .nav-menu__chevron,
.nav-menu:focus-within .nav-menu__chevron { transform: rotate(180deg); }
.nav-menu:hover .nav-menu__summary,
.nav-menu:focus-within .nav-menu__summary { background: var(--secondary); color: var(--foreground); }
.nav-menu__summary:focus-visible { box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5); }
.nav-menu__panel {
  display: none;
  position: absolute; top: calc(100% + 0.625rem); left: -0.5rem; z-index: 60;
  width: 17rem; padding: 0.375rem; box-sizing: border-box;
  background: var(--popover); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev-overlay);
}
/* bridges the gap between trigger and panel, so the hover survives the move */
.nav-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
.nav-menu:hover .nav-menu__panel,
.nav-menu:focus-within .nav-menu__panel { display: block; }
/* On a phone the panel spans the nav bar (its backdrop-filter makes the bar
   the containing block of a fixed child), so it never runs off the screen. */
@media (max-width: 519px) {
  .site-nav .nav-menu__panel { position: fixed; top: calc(100% + 0.5rem); left: 0; right: 0; width: auto; }
}
.nav-menu__item {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.625rem 0.75rem;
  border-radius: calc(var(--radius) * 0.8); text-decoration: none;
}
.nav-menu__item:hover { background: var(--secondary); }
.nav-menu__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: calc(var(--radius) * 0.6);
  background: var(--accent); color: var(--primary);
}
.nav-menu__icon svg { width: 1rem; height: 1rem; }
.nav-menu__title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.nav-menu__sub { display: block; font-size: 0.8125rem; color: var(--muted-foreground); }

/* ── Sections ── */
.site-section { padding: 5rem 0; }
@media (min-width: 768px) { .site-section { padding: 7rem 0; } }
.site-section--muted { background: var(--secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.site-kicker { margin: 0 0 0.75rem; color: var(--primary); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; }
.site-h2 { margin: 0 0 1rem; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.site-lead { margin: 0; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.65; }
.site-head { max-width: 40rem; margin: 0 auto 3.5rem; text-align: center; }

/* ── Hero: two columns (layout after the old „Mehr Raum“ draft + via-health.de) ── */
.site-hero {
  position: relative; overflow: hidden;
  padding: 8.5rem 0 4rem;
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(42, 86, 200, 0.10), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgba(42, 86, 200, 0.06), transparent 70%);
}
@media (min-width: 768px) { .site-hero { padding: 10rem 0 6rem; } }
.site-hero__grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1024px) { .site-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.site-hero__title {
  margin: 1.5rem 0 1rem; font-size: clamp(2.75rem, 1.6rem + 5vw, 4.75rem);
  line-height: 1; letter-spacing: -0.045em; font-weight: 800;
}
.site-hero__title span { color: var(--primary); }
.site-hero__subtitle { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; }
.site-hero__text { margin: 0 0 2rem; max-width: 34rem; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.65; }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.site-checks li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; }
.site-checks svg { width: 1rem; height: 1rem; color: var(--success); flex-shrink: 0; }

/* The product preview: a chat window drawn in HTML, decorative */
.site-preview { position: relative; }
.site-preview__window { overflow: hidden; border-radius: calc(var(--radius) * 1.8); box-shadow: var(--elev-modal); }
.site-preview__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--secondary);
}
.site-preview__dots { display: flex; gap: 0.375rem; }
.site-preview__dots i { display: block; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--border); }
.site-preview__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem; }
.site-msg { max-width: 85%; padding: 0.875rem 1rem; border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.5; }
.site-msg--user { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 0.25rem; }
.site-msg--ai { align-self: flex-start; background: var(--secondary); border: 1px solid var(--border); border-bottom-left-radius: 0.25rem; width: 85%; box-sizing: border-box; }
.site-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem;
  padding: 0.375rem 0.625rem; border-radius: calc(var(--radius) * 0.6);
  background: rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 500;
}
.site-chip svg { width: 0.875rem; height: 0.875rem; }
.site-skeleton { display: block; height: 0.625rem; margin: 0.5rem 0; border-radius: 999px; background: #dfe5ee; }
.site-skeleton--90 { width: 90%; } .site-skeleton--75 { width: 75%; } .site-skeleton--60 { width: 60%; } .site-skeleton--40 { width: 40%; }
.site-msg__label { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; }
.site-msg__label svg { width: 0.875rem; height: 0.875rem; color: var(--primary); }
.site-preview__input {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0 1.25rem 1.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted-foreground); font-size: 0.875rem;
}
.site-preview__send {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: calc(var(--radius) * 0.6); background: var(--primary); color: #fff;
}
.site-preview__send svg { width: 1rem; height: 1rem; }
.site-preview__float {
  position: absolute; left: -1rem; bottom: -1.25rem; display: none;
  align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius);
}
@media (min-width: 1024px) { .site-preview__float { display: flex; } }
.site-preview__float svg { width: 1.25rem; height: 1.25rem; color: var(--success); }
.site-preview__float strong { display: block; font-size: 0.875rem; }
.site-preview__float span { display: block; color: var(--muted-foreground); font-size: 0.75rem; }

/* Trust row */
.site-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
/* In their own colours, as on the old page (Julius 2026-11-04). */
.site-logos img { height: 2.25rem; width: auto; }

/* Feature grid */
.site-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .site-grid--3 { grid-template-columns: repeat(3, 1fr); } .site-grid--2 { grid-template-columns: repeat(2, 1fr); } .site-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.site-feature { padding: 1.75rem; }
.site-feature__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem;
  border-radius: var(--radius); background: var(--accent); color: var(--primary);
}
.site-feature__icon svg { width: 1.25rem; height: 1.25rem; }
.site-feature h3 { margin: 0 0 0.5rem; font-size: 1.125rem; letter-spacing: -0.01em; font-weight: 650; }
.site-feature p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }

/* Two equal ways in */
.site-way { display: flex; flex-direction: column; padding: 2rem; }
.site-way h3 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 700; }
.site-way > p { margin: 0 0 1.5rem; color: var(--muted-foreground); }
.site-steps { margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: step; flex: 1; }
.site-steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--border); font-size: 0.9375rem; counter-increment: step; }
.site-steps li::before {
  /* a check, like the step lists on /ki/* (Durchsicht Fund 8) */
  content: "✓"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--accent); color: var(--primary); font-size: 0.75rem; font-weight: 700;
}
.site-way__note { margin: 0.75rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; text-align: center; }

/* Price card */
.site-price { max-width: 28rem; margin: 0 auto; padding: 2rem; text-align: center; }
.site-price__amount { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 1.5rem; }
.site-price__amount strong { font-size: 3.5rem; line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.site-price__amount span { color: var(--muted-foreground); }
.site-price__list { margin: 0 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--border); list-style: none; text-align: left; }
.site-price__list li { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0 0 0.75rem; font-size: 0.9375rem; }
.site-price__list svg { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; flex-shrink: 0; color: var(--success); }

/* Accordion */
.site-faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--border); }
.accordion { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 600;
}
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger:hover { color: var(--primary); }
.accordion__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5); border-radius: 0.25rem; }
.accordion__chevron { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: var(--muted-foreground); transition: transform 0.2s; }
.accordion[open] .accordion__chevron { transform: rotate(180deg); }
.accordion__content { margin: 0; padding: 0 2rem 1.25rem 0; color: var(--muted-foreground); line-height: 1.65; }

/* Closing band */
.site-cta {
  position: relative; overflow: hidden; padding: 3.5rem 2rem; text-align: center; color: #fff;
  border-radius: calc(var(--radius) * 2.2);
  background: radial-gradient(60% 80% at 100% 0%, #5b82e6, transparent 60%), linear-gradient(135deg, #1b3e9e, var(--primary));
  box-shadow: var(--elev-modal);
}
@media (min-width: 768px) { .site-cta { padding: 4.5rem 3rem; } }
.site-cta h2 { margin: 0 0 1rem; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.site-cta p { max-width: 34rem; margin: 0 auto 2rem; color: rgba(255, 255, 255, 0.82); font-size: 1.125rem; }
.site-cta .site-hero__actions { justify-content: center; }

/* ── Footer ── */
/* On the root the last section already carries its own padding; the extra
   margin left a large white gap above the footer (Julius 2026-11-04). */
main + .site-footer { margin-top: 0; }
main > .site-section:last-child { padding-bottom: 3rem; }
.site-footer { margin-top: 5rem; padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--border); background: var(--background); font-size: 0.875rem; }
.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__brand p { max-width: 18rem; margin: 0.75rem 0 1.25rem; color: var(--muted-foreground); }
.site-footer__seal { width: 5rem; height: auto; }
.site-footer h4 { margin: 0 0 0.875rem; font-size: 0.875rem; font-weight: 600; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 0.25rem; }
/* tap targets of at least 24px (WCAG 2.5.8; Durchsicht Fund 7) */
.site-footer li a { display: inline-block; padding: 0.25rem 0; min-height: 1.5rem; }
.site-footer a:not(.site-nav__logo) { color: var(--muted-foreground); text-decoration: none; }
.site-footer a:not(.site-nav__logo):hover { color: var(--foreground); }
.site-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted-foreground); }

/* The /ki/start webinar button (A/B parity, Julius 2026-11-03): <details>, no script */
.reveal__summary { list-style: none; cursor: pointer; }
.reveal__summary::-webkit-details-marker { display: none; }
.reveal[open] .reveal__summary { display: none; }
.reveal__summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 36, 56, 0.5); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Phones first (Julius 2026-11-04: on an iPhone the page ran off the right
   edge). Laptop and desktop stay as they are: every rule below is scoped to
   widths under 640px, plus two layout guards that change nothing on desktop. ── */

/* A grid track's minimum is its content's min-content width; one long line or
   a nowrap button widened the hero column past the screen. */
.site-hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .site-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.site-hero__grid > *, .site-grid > *, .grid > * { min-width: 0; } /* .grid: the capture pages (/kontakt, /demo, /jetzt-starten, /ki/*) */
/* Safety net: nothing may widen the page sideways. `clip`, not `hidden`, so
   the fixed nav keeps working. */
html, body { overflow-x: clip; }

@media (max-width: 639px) {
  .site-nav { top: 0.5rem; padding: 0 0.5rem; }
  .site-nav__bar { height: 3.25rem; padding: 0 0.5rem 0 0.875rem; gap: 0.5rem; }
  .site-nav__logo img { width: 1.5rem; height: 1.5rem; }
  .site-nav__wordmark { font-size: 1.125rem; }
  .site-nav__link { padding: 0 0.5rem; }
  .site-nav__actions .btn--sm { height: 2.25rem; padding: 0 0.75rem; }

  .site-hero { padding: 6.5rem 0 3rem; }
  .site-hero__title { margin: 1.25rem 0 0.75rem; font-size: clamp(2.25rem, 11vw, 3rem); }
  .site-hero__text { font-size: 1rem; margin-bottom: 1.5rem; }
  .site-hero__actions { flex-direction: column; }
  .site-hero__actions .btn { width: 100%; }
  .site-checks { flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
  .site-hero__grid { gap: 2.5rem; }
  .site-preview { margin: 0; } /* a <figure> brings 40px side margins */
  .site-preview__body { padding: 1.25rem 1rem; }
  .site-msg { font-size: 0.875rem; }

  .site-logos { gap: 1rem 1.5rem; margin-top: 2.5rem; padding-top: 2rem; }
  .site-logos img { height: 1.75rem; }

  .site-section { padding: 3.5rem 0; }
  .site-head { margin-bottom: 2rem; }
  .site-lead { font-size: 1rem; }
  .site-feature { padding: 1.25rem; }
  .site-way { padding: 1.5rem; }
  .site-price { padding: 1.5rem; }
  .site-price__amount strong { font-size: 2.75rem; }
  .accordion__trigger { font-size: 1rem; padding: 1rem 0; }
  .accordion__content { padding-right: 0; }
  .site-cta { padding: 2.5rem 1.25rem; border-radius: calc(var(--radius) * 1.6); }
  .site-cta p { font-size: 1rem; }
  .site-footer { margin-top: 3rem; padding-top: 2.5rem; }
}

@media (max-width: 639px) {
  /* the capture pages' badges ("DSGVO- und KBV-konform") may wrap on a phone */
  .whitespace-nowrap { white-space: normal; }
}

/* Very narrow screens (an iPhone with larger text): the mark alone. */
@media (max-width: 359px) {
  .site-nav__wordmark { display: none; }
}

/* ── Phone flow, 2026-11-04 (Julius: „das Scrollen fühlt sich zu lang an, da
   die Felder zu groß sind“ — use shadcn, keep it clean). The root measured
   8.6 screen heights at 375px. Under 640px the cards become shadcn „Item“ rows
   (icon left, title and one line right), the preview keeps only the request
   and the draft, and sections tighten. Desktop is untouched. ── */
@media (max-width: 639px) {
  .site-section { padding: 2.5rem 0; }
  .site-head { margin-bottom: 1.25rem; text-align: left; }
  .site-kicker { margin-bottom: 0.375rem; font-size: 0.8125rem; }
  .site-h2 { font-size: 1.625rem; margin-bottom: 0.5rem; }
  .site-lead { font-size: 0.9375rem; line-height: 1.55; }

  /* hero: the preview is decoration (aria-hidden) and the buttons sit right
     above it, so on a phone it goes */
  .site-preview { display: none; }
  .site-checks { flex-direction: row; flex-wrap: wrap; gap: 0.375rem 1rem; }
  .site-hero { padding: 6rem 0 2rem; }
  .site-hero__grid { gap: 1.75rem; }
  .site-preview__input, .site-preview__float, .site-preview__bar .site-preview__dots { display: none; }
  .site-preview__bar { padding: 0.625rem 0.875rem; }
  .site-preview__body { gap: 0.625rem; padding: 0.875rem; }
  .site-msg { padding: 0.625rem 0.75rem; font-size: 0.8125rem; max-width: 92%; }
  .site-msg--ai { width: 70%; }
  .site-skeleton { height: 0.5rem; margin: 0.375rem 0; }
  .site-skeleton:nth-of-type(n+4) { display: none; }
  .site-chip { margin-top: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  .site-logos { margin-top: 1.75rem; padding-top: 1.25rem; gap: 0.75rem 1.25rem; }
  .site-logos img { height: 1.5rem; }

  /* feature and data-protection cards as Item rows */
  .site-grid { gap: 0.5rem; }
  .site-feature {
    display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.875rem; align-items: start;
    padding: 0.875rem 1rem; border-radius: var(--radius);
  }
  .site-feature__icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; margin: 0; border-radius: calc(var(--radius) * 0.8); }
  .site-feature__icon svg { width: 1.125rem; height: 1.125rem; }
  .site-feature h3 { margin: 0 0 0.125rem; font-size: 0.9375rem; line-height: 1.35; }
  .site-feature p { font-size: 0.8125rem; line-height: 1.5; }

  /* price: one compact card */
  .site-price { padding: 1.25rem; text-align: left; }
  .site-price__amount { justify-content: flex-start; margin: 0.75rem 0 1rem; }
  .site-price__amount strong { font-size: 2.25rem; }
  .site-price__list { padding-top: 1rem; margin-bottom: 1.25rem; }
  .site-price__list li { margin-bottom: 0.5rem; font-size: 0.875rem; }

  /* the two ways: heading, one line, the three steps in a row, the button */
  .site-way { padding: 1.25rem; }
  .site-way .site-kicker { margin-bottom: 0.25rem; }
  .site-way h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
  /* the steps say what the description and the note say */
  .site-way > p:not(.site-kicker) { display: none; }
  .site-way h3 { margin-bottom: 0.75rem; }
  .site-steps { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
  .site-steps li { border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.625rem 0.25rem 0.375rem; font-size: 0.75rem; gap: 0.375rem; }
  .site-steps li::before { width: 1rem; height: 1rem; font-size: 0.625rem; }
  .site-way .btn--lg { height: 2.75rem; font-size: 0.9375rem; }
  .site-way__note { margin-top: 0.5rem; font-size: 0.75rem; }

  /* FAQ and closing band */
  .accordion__trigger { padding: 0.875rem 0; font-size: 0.9375rem; }
  .accordion__content { font-size: 0.875rem; padding-bottom: 0.875rem; }
  .site-cta { padding: 1.75rem 1.25rem; text-align: left; }
  .site-cta h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .site-cta p { margin: 0 0 1.25rem; font-size: 0.9375rem; }
  .site-cta .site-hero__actions { justify-content: stretch; }
  .site-footer { margin-top: 1.5rem; padding: 2rem 0 1.5rem; }
  .site-footer__grid { gap: 1.5rem; }
  .site-footer__bottom { margin-top: 1.5rem; padding-top: 1rem; }
}


/* ── Capture pages on a phone, 2026-11-04 (button and alignment pass). ── */
@media (max-width: 639px) {
  /* a call to action spans the column, as the root hero's do */
  .gradient-accent { display: flex; width: 100%; }
  /* the form cards: 32px of padding left 261px for a field at 375px */
  .rounded-2xl.p-8 { padding: 1.25rem; }
  /* the root's rhythm: 16px gutter, the first line 6rem down, 2.5rem above
     the footer (was 24px, 8rem and 5rem) */
  .container.px-6 { padding-left: 1rem; padding-right: 1rem; }
  section.pt-32 { padding-top: 6rem; }
  section.py-20 { padding-bottom: 2.5rem; }
  /* a trailing margin at the end of a column only widened that gap */
  section .mb-8:last-child, section .mb-10:last-child { margin-bottom: 0; }
}

/* ── The practice 404 (`404.html`, Adonis 2026-11-04: „sieht zu unprofessionell aus“) ──
   praxista.de's own look instead of a bare card: the floating logo pill, a
   heading in the hero's voice with its last word in the primary colour, the
   hero's soft radial wash, a way home and the site's footer. The two
   sentences are unchanged (PRD §8, §3.8: never say whether THIS address
   existed). The way home is on purpose, although B2's R20 once kept the
   body link-free: nobody who lands here is to be lost [decision: Adonis
   2026-11-04, F-425]. */
.site-leer {
  display: flex; align-items: center; justify-content: center;
  min-height: 100svh; padding: 8rem 0 4rem; box-sizing: border-box; text-align: center;
  background:
    radial-gradient(45% 55% at 50% 0%, rgba(42, 86, 200, 0.10), transparent 70%),
    radial-gradient(35% 45% at 100% 100%, rgba(42, 86, 200, 0.05), transparent 70%);
}
.site-leer__inhalt { display: flex; flex-direction: column; align-items: center; max-width: 40rem; }
.site-leer__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin-bottom: 1.5rem;
  border-radius: calc(var(--radius) * 1.6); background: var(--accent); color: var(--primary);
  box-shadow: var(--elev-raised);
}
.site-leer__zeichen svg { width: 1.875rem; height: 1.875rem; }
.site-leer__titel {
  margin: 1.25rem 0 1.25rem; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance;
}
.site-leer__titel span { color: var(--primary); }
.site-leer__text { margin: 0 0 0.75rem; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }
.site-leer__hinweis { margin: 0 0 2.25rem; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }
.site-footer--schmal { margin-top: 0; padding: 2rem 0 1.75rem; }
.site-footer__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer__zeile ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-footer--schmal .site-footer__bottom { margin-top: 1.5rem; }