/* ==========================================================================
   "Ab in die Inso" — INSO design system (single source of truth)
   Mobile-first. Base styles = phone; complexity is added upward with
   min-width breakpoints only. No dead generations, no external deps.
   ========================================================================== */

/* ---- Self-hosted brand fonts ------------------------------------------ */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-400.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-600.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-700.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-600.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-600-italic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ============ INSO design tokens — single source of truth ============ */
:root {
  /* ---- color: hex fallbacks (used when OKLCH unsupported) ---- */
  --inso-ink: #07182b;            /* body text, header/footer bg */
  --inso-ink-deep: #0a2036;       /* raised dark surfaces */
  --inso-navy: #0b2545;           /* dark sections */
  --inso-blue: #123e6b;           /* links, info accents on light */
  --inso-lime: #b9d957;           /* THE accent: CTAs, focus on dark */
  --inso-lime-hover: #cbe870;     /* button hover */
  --inso-lime-deep: #56711a;      /* lime-hue text that passes AA on cream (5.04:1) */
  --inso-cream: #f4f4ec;          /* calm alt surface */
  --inso-paper: #ffffff;
  --inso-mist: #e9eef1;           /* subtle fills */
  --inso-line: #d5dee3;           /* hairline borders */
  --inso-muted: #52616e;          /* secondary text on light (6.38:1 on white) */
  --inso-muted-on-dark: #aebcca;  /* secondary text on dark */
  --inso-danger: #9d2f2f;         /* errors (7.29:1 on white) */
  --inso-danger-bg: #fff0ee;
  --inso-danger-ink: #752121;
  --inso-success: #216b49;        /* confirmations (6.43:1 on white) */
  --inso-warn-bg: #f8e7a8;        /* mock/preview banners */
  --inso-warn-ink: #352b08;
  --inso-focus: #123e6b;          /* focus ring on light */
  --inso-focus-on-dark: #b9d957; /* focus ring on dark */

  /* ---- type ---- */
  --inso-font-sans: "DM Sans", Arial, Helvetica, sans-serif;
  --inso-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --inso-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --inso-text-display: clamp(2.75rem, 1.75rem + 5vw, 4.75rem);   /* hero h1 */
  --inso-text-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);        /* page h1 */
  --inso-text-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --inso-text-h3: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --inso-text-lead: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --inso-text-body: 1rem;          /* 16px — also the minimum input size (iOS zoom) */
  --inso-text-small: 0.875rem;
  --inso-text-caption: 0.78rem;
  --inso-eyebrow-size: 0.75rem;
  --inso-leading-body: 1.65;
  --inso-leading-tight: 1.08;

  /* ---- spacing (fluid) ---- */
  --inso-space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --inso-space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --inso-space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  --inso-space-md: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --inso-space-lg: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --inso-space-xl: clamp(3rem, 2rem + 5vw, 5.5rem);
  --inso-section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --inso-shell: 73.75rem;         /* 1180px max content width */
  --inso-shell-gutter: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
  --inso-narrow: 51.25rem;        /* 820px reading measure */

  /* ---- shape & elevation ---- */
  --inso-radius-sm: 3px;
  --inso-radius-md: 6px;
  --inso-radius-lg: 14px;
  --inso-radius-pill: 999px;
  --inso-border: 1px solid var(--inso-line);
  --inso-shadow-sm: 0 2px 8px rgb(7 24 43 / 0.08);
  --inso-shadow-md: 0 12px 32px rgb(7 24 43 / 0.1);
  --inso-shadow-lg: 0 24px 70px rgb(7 24 43 / 0.12);

  /* ---- layout ---- */
  --inso-header-h: 5.5rem;
  --inso-header-h-mobile: 4.5rem;
  --inso-mobile-cta-h: 3.75rem;   /* fixed CTA bar height incl. padding */
  --inso-z-mobile-cta: 90;
  --inso-z-header: 100;
  --inso-z-dropdown: 200;
  --inso-z-flash: 300;
  --inso-z-skip: 1000;

  /* ---- motion ---- */
  --inso-dur-fast: 150ms;
  --inso-dur-base: 250ms;
  --inso-dur-slow: 450ms;
  --inso-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --inso-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* motion: entrances, draws */
  --inso-focus-width: 3px;
  --inso-focus-offset: 3px;

  /* ---- atmosphere (decorative background layers — quiet by design) ---- */
  --inso-glow: rgb(185 217 87 / 0.12);      /* sunrise glow tint on dark */
  --inso-line-faint: rgb(7 24 43 / 0.08);   /* hairline rules on light */
  --inso-line-faint-on-dark: rgb(255 255 255 / 0.09);
  --inso-grain-opacity: 0.035;              /* film-grain overlay */
  --inso-dur-reveal: 750ms;                 /* scroll-reveal */
  --inso-dur-breathe: 48s;                  /* hero atmosphere cycle */

  /* ---- breakpoints (mobile-first: base = phone, min-width up) ---- */
  --inso-bp-sm: 36rem;    /* 576px  */
  --inso-bp-md: 48rem;    /* 768px  */
  --inso-bp-lg: 64rem;    /* 1024px */
  --inso-bp-xl: 80rem;    /* 1280px */
}

/* ---- OKLCH working values (same tokens, perceptually uniform) ---- */
@supports (color: oklch(0% 0% 0)) {
  :root {
    --inso-ink: oklch(20.6% 0.045 252.7);
    --inso-ink-deep: oklch(23.9% 0.051 250.8);
    --inso-navy: oklch(26.4% 0.068 255.4);
    --inso-blue: oklch(36% 0.091 252.4);
    --inso-lime: oklch(83.6% 0.16 121.6);
    --inso-lime-hover: oklch(88.5% 0.15 120.8);
    --inso-lime-deep: oklch(51% 0.116 125.6);
    --inso-cream: oklch(96.5% 0.01 106.9);
    --inso-paper: oklch(100% 0 0);
    --inso-mist: oklch(94.6% 0.007 234.1);
    --inso-line: oklch(89.5% 0.012 231.9);
    --inso-muted: oklch(48.5% 0.028 244.6);
    --inso-muted-on-dark: oklch(78% 0.03 245);
    --inso-danger: oklch(47.2% 0.146 24.6);
    --inso-danger-bg: oklch(96.6% 0.016 26.3);
    --inso-danger-ink: oklch(38.2% 0.117 24.6);
    --inso-success: oklch(47.3% 0.091 159.6);
    --inso-warn-bg: oklch(92.7% 0.082 94.8);
    --inso-warn-ink: oklch(29.3% 0.052 92.7);
    --inso-focus: oklch(36% 0.091 252.4);
    --inso-focus-on-dark: oklch(83.6% 0.16 121.6);
  }
}

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

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

body {
  margin: 0;
  color: var(--inso-ink);
  background: var(--inso-paper);
  font-family: var(--inso-font-sans);
  font-size: var(--inso-text-body);
  line-height: var(--inso-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
figcaption { font-size: var(--inso-text-caption); color: var(--inso-muted); margin-top: var(--inso-space-xs); }

h1, h2, h3, h4 {
  font-family: var(--inso-font-serif);
  font-weight: 600;
  line-height: var(--inso-leading-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--inso-space-sm);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--inso-text-h1); }
h2 { font-size: var(--inso-text-h2); }
h3 { font-size: var(--inso-text-h3); }

p { margin: 0 0 var(--inso-space-sm); }

a {
  color: var(--inso-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

ul, ol { padding-inline-start: 1.5rem; margin: 0 0 var(--inso-space-sm); }
li { margin-bottom: var(--inso-space-xs); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

table { width: 100%; border-collapse: collapse; font-size: var(--inso-text-small); }
th, td { text-align: start; padding: var(--inso-space-xs) var(--inso-space-sm); border-bottom: var(--inso-border); }
th { font-weight: 600; color: var(--inso-ink); }

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

/* ==========================================================================
   Focus system — visible ring for keyboard users, never for mouse
   ========================================================================== */
:focus-visible {
  outline: var(--inso-focus-width) solid var(--inso-focus);
  outline-offset: var(--inso-focus-offset);
  border-radius: var(--inso-radius-sm);
}
/* Dark surfaces (header / footer / hero / banners): lime ring */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.form-wrap aside :focus-visible,
.mock-banner :focus-visible,
.preview-banner :focus-visible {
  outline-color: var(--inso-focus-on-dark);
}
/* A focused skip-target should not draw a permanent box */
main:focus { outline: none; }

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-inline-start: var(--inso-space-md); top: -8rem;
  z-index: var(--inso-z-skip);
  background: var(--inso-lime); color: var(--inso-ink);
  font-weight: 700; text-decoration: none;
  padding: var(--inso-space-sm) var(--inso-space-md);
  border-radius: var(--inso-radius-md);
  transition: top var(--inso-dur-fast) var(--inso-ease-out);
}
.skip-link:focus-visible { top: var(--inso-space-md); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.shell {
  width: min(var(--inso-shell), 100% - (var(--inso-shell-gutter) * 2));
  margin-inline: auto;
}
.narrow { max-width: var(--inso-narrow); }
.section { padding-block: var(--inso-section-y); }
.section-muted { background: var(--inso-cream); }
.page-head { padding-block: var(--inso-space-lg) var(--inso-space-md); }
.page-head .shell > * { max-width: var(--inso-narrow); }
.lead { font-size: var(--inso-text-lead); color: var(--inso-muted); max-width: 44rem; }
.eyebrow {
  display: flex; align-items: center; gap: var(--inso-space-xs);
  font-size: var(--inso-eyebrow-size); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--inso-lime-deep); margin: 0 0 var(--inso-space-sm);
}
.eyebrow::before { content: ""; inline-size: 2rem; block-size: 2px; background: var(--inso-lime); flex: none; }
/* Kicker line-draw: JS adds .inso-motion to <html> only when motion is safe;
   the rule then draws in via scaleX as the section enters the viewport.
   No-JS / reduced-motion: rule is simply fully drawn. */
.inso-motion .eyebrow::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 650ms var(--inso-ease-expo);
}
.inso-motion .eyebrow.is-visible::before { transform: scaleX(1); }
.hero .eyebrow, .site-footer .eyebrow { color: var(--inso-lime); }

/* ==========================================================================
   Header / navigation (markup contract: .site-header > .shell.header-inner
   > .brand + button.nav-toggle[aria-expanded][aria-controls=site-nav]
   > nav.site-nav#site-nav)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--inso-z-header);
  background: var(--inso-ink); color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.header-inner {
  display: flex; align-items: center; gap: var(--inso-space-md);
  min-block-size: var(--inso-header-h-mobile);
}
.brand {
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; text-decoration: none; margin-inline-end: auto;
  padding-block: var(--inso-space-xs);
}
.brand-logo {
  display: block; height: 2.75rem; width: auto; flex: none;
}
.brand-sub {
  font-size: var(--inso-text-caption); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--inso-muted-on-dark);
  margin-top: var(--inso-space-2xs);
}

/* Hamburger — base = phone: visible, nav is a dropdown panel */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  inline-size: 44px; block-size: 44px; flex: none;
  background: transparent; border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: var(--inso-radius-md);
  color: #fff;
}
.nav-toggle > span:not(.sr-only) { display: block; inline-size: 22px; block-size: 2px; background: #fff; border-radius: 1px; transition: transform var(--inso-dur-fast) var(--inso-ease-out), opacity var(--inso-dur-fast) var(--inso-ease-out); }
.nav-toggle > .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;                       /* opened by .open (site.js) */
  position: absolute; inset-inline: 0; top: 100%;
  max-block-size: calc(100dvh - var(--inso-header-h-mobile));
  overflow: auto;
  background: var(--inso-ink);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: var(--inso-shadow-md);
  padding: var(--inso-space-sm) var(--inso-shell-gutter) var(--inso-space-md);
  flex-direction: column;
}
.site-nav.open { display: flex; }
.site-nav a {
  display: block; color: #dfe6ec; text-decoration: none;
  font-size: 1rem; padding: var(--inso-space-sm) var(--inso-space-xs);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  min-block-size: 44px; align-content: center;
}
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: var(--inso-lime); font-weight: 600; }
.site-nav .button, .site-nav a.button {
  margin-top: var(--inso-space-sm);
  border-bottom: 0;
  color: var(--inso-ink) !important;
  align-self: stretch;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   Mobile CTA bar (phone only) — never covers content
   ========================================================================== */
.mobile-cta {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--inso-z-mobile-cta);
  min-block-size: var(--inso-mobile-cta-h);
  padding: var(--inso-space-sm) var(--inso-space-md);
  padding-bottom: calc(var(--inso-space-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--inso-lime); color: var(--inso-ink);
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  border-top: 1px solid rgb(7 24 43 / 0.2);
}
.mobile-cta { color: var(--inso-ink) !important; }
.mobile-cta:hover { background: var(--inso-lime-hover); color: var(--inso-ink); }
/* Compensation: keeps footer links and submit buttons reachable on phones */
body {
  padding-bottom: calc(var(--inso-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--inso-navy); color: #fff;
  position: relative; overflow: clip;
}
.hero-grid {
  position: relative; z-index: 1;
  padding-block: var(--inso-section-y);
  display: grid; gap: var(--inso-space-lg);
}
.hero-grid > *, .page-head-grid > * { min-inline-size: 0; }
.hero h1 { font-size: var(--inso-text-display); color: #fff; margin-bottom: var(--inso-space-md); }
.hero .lead { color: var(--inso-muted-on-dark); }
.hero .button { margin-top: var(--inso-space-sm); }
.hero-note {
  border-inline-start: 2px solid var(--inso-lime);
  padding-inline-start: var(--inso-space-md);
}
.hero-note strong { display: block; font-family: var(--inso-font-serif); font-weight: 600; font-size: var(--inso-text-h3); }
.hero-note p { color: var(--inso-muted-on-dark); margin: 0; }

/* ==========================================================================
   Trust signals (.facts) — container-query cards
   ========================================================================== */
.facts {
  container-type: inline-size;
  padding-block: var(--inso-space-lg) 0;
}
.facts > div { display: grid; gap: var(--inso-space-sm); }
.facts > div > div { border-top: 2px solid var(--inso-lime); padding-top: var(--inso-space-xs); }
.facts strong { display: block; font-family: var(--inso-font-serif); font-weight: 600; font-size: 1.35rem; }
.facts span { color: var(--inso-muted); font-size: var(--inso-text-small); }
@container (min-width: 40rem) {
  .facts > div { grid-template-columns: repeat(3, 1fr); gap: var(--inso-space-md); }
}

/* ==========================================================================
   Cards (.cards) — container queries: the component lays itself out
   ========================================================================== */
.cards {
  container-type: inline-size;
  display: grid; gap: var(--inso-space-md);
  margin-block: var(--inso-space-lg) 0;
}
.cards article {
  background: var(--inso-paper);
  border: var(--inso-border); border-top: 2px solid var(--inso-lime);
  border-radius: var(--inso-radius-lg);
  padding: var(--inso-space-md);
  box-shadow: var(--inso-shadow-sm);
  transition: transform var(--inso-dur-base) var(--inso-ease-out), box-shadow var(--inso-dur-base) var(--inso-ease-out);
}
.cards article:hover { transform: translateY(-2px); box-shadow: var(--inso-shadow-md); }
.cards h3 { font-size: var(--inso-text-h3); margin-bottom: var(--inso-space-xs); }
.cards p { color: var(--inso-muted); font-size: var(--inso-text-small); margin: 0; }
.cards a { min-block-size: 44px; display: inline-flex; align-items: center; }
@container (min-width: 30rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 52rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps { display: grid; gap: var(--inso-space-md); margin-block-start: var(--inso-space-lg); }
.steps > div { border-top: 2px solid var(--inso-line); padding-top: var(--inso-space-sm); }
.steps b { font-size: var(--inso-text-small); color: var(--inso-lime-deep); letter-spacing: 0.1em; }
.steps h3 { margin: var(--inso-space-2xs) 0 var(--inso-space-xs); }
.steps p { color: var(--inso-muted); margin: 0; font-size: var(--inso-text-small); }

/* ==========================================================================
   Pricing (.price-card) — calm, brutto, inkl. USt.
   ========================================================================== */
.price-card {
  background: var(--inso-paper);
  border: var(--inso-border); border-top: 3px solid var(--inso-lime);
  border-radius: var(--inso-radius-lg);
  padding: var(--inso-space-lg) var(--inso-space-md);
  text-align: center;
  box-shadow: var(--inso-shadow-sm);
}
.price-card h3 { margin-bottom: var(--inso-space-xs); }
.price-figure {
  font-family: var(--inso-font-serif); font-weight: 600;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  line-height: 1; margin-block: var(--inso-space-sm);
}
.price-figure small {
  display: block; font-family: var(--inso-font-sans);
  font-size: var(--inso-text-small); font-weight: 400;
  color: var(--inso-muted); margin-top: var(--inso-space-xs);
}
.price-card ul { list-style: none; padding: 0; margin: var(--inso-space-md) 0; text-align: start; }
.price-card li { padding-inline-start: 1.6rem; position: relative; margin-bottom: var(--inso-space-xs); font-size: var(--inso-text-small); }
.price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--inso-lime-deep); font-weight: 700; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--inso-space-xs);
  min-block-size: 48px; padding: var(--inso-space-xs) var(--inso-space-md);
  background: var(--inso-lime); color: var(--inso-ink);
  border: 1px solid var(--inso-lime); border-radius: var(--inso-radius-md);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: background var(--inso-dur-fast) var(--inso-ease-out),
              transform var(--inso-dur-fast) var(--inso-ease-out),
              box-shadow var(--inso-dur-fast) var(--inso-ease-out);
}
.button:hover {
  background: var(--inso-lime-hover); border-color: var(--inso-lime-hover);
  transform: translateY(-1px); box-shadow: var(--inso-shadow-sm);
}
.button:active { transform: translateY(0); }
.button-secondary {
  background: transparent; border-color: var(--inso-ink); color: var(--inso-ink);
}
.button-secondary:hover { background: var(--inso-mist); border-color: var(--inso-ink); box-shadow: none; }
.button-small { min-block-size: 42px; padding: var(--inso-space-2xs) var(--inso-space-sm); font-size: var(--inso-text-small); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.text-link {
  font-weight: 600; color: var(--inso-blue);
  text-decoration: underline; text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-color: var(--inso-lime-deep); text-decoration-thickness: 2px; }

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.final-cta { text-align: center; }
.final-cta p { color: var(--inso-muted); max-width: 40rem; margin-inline: auto; }
.final-cta p a { font-weight: 600; }
.final-cta .button { margin-top: var(--inso-space-md); }

/* ==========================================================================
   Forms (Django widget output) — honest, calm, thumb-friendly
   ========================================================================== */
.form-wrap { display: grid; gap: var(--inso-space-lg); padding-block-end: var(--inso-section-y); }
.contact-form {
  background: var(--inso-paper);
  border: var(--inso-border); border-radius: var(--inso-radius-lg);
  padding: var(--inso-space-md);
  box-shadow: var(--inso-shadow-sm);
  max-width: var(--inso-narrow);
}
.form-wrap .contact-form { margin: 0; }

.field-grid { display: grid; gap: var(--inso-space-md); margin-block-end: var(--inso-space-md); }
.field-grid label, .contact-form > label, .login-card label, .editor-form label {
  display: block; font-weight: 600; font-size: var(--inso-text-small);
}
.field-grid label > span, .contact-form > label > span, .login-card label > span, .editor-form label > span {
  display: block; margin-bottom: var(--inso-space-xs);
}
.field-grid label small, .contact-form > label small, .editor-form .helptext {
  display: block; font-weight: 400; color: var(--inso-muted); font-size: var(--inso-text-caption);
  margin-top: var(--inso-space-2xs);
}

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
select, textarea {
  width: 100%; min-block-size: 44px;
  font-size: 1rem; /* 16px: kills iOS auto-zoom */
  color: var(--inso-ink); background: var(--inso-paper);
  border: 1px solid var(--inso-line); border-radius: var(--inso-radius-md);
  padding: var(--inso-space-xs) var(--inso-space-sm);
}
textarea { min-block-size: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--inso-blue);
  outline: var(--inso-focus-width) solid rgb(18 62 107 / 0.3);
  outline-offset: 1px;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--inso-danger);
}
/* Parent-aware error tint where :has() is supported (progressive enhancement) */
.field-grid label:has(.field-error) input,
.field-grid label:has(.field-error) select,
.contact-form > label:has(.field-error) input,
.contact-form > label:has(.field-error) textarea {
  border-color: var(--inso-danger);
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--inso-space-md); }
legend {
  font-family: var(--inso-font-serif); font-weight: 600;
  font-size: var(--inso-text-h3); margin-bottom: var(--inso-space-sm); padding: 0;
}

.check-row {
  display: flex; align-items: flex-start; gap: var(--inso-space-sm);
  background: var(--inso-cream); border-radius: var(--inso-radius-md);
  padding: var(--inso-space-sm); font-size: var(--inso-text-small); font-weight: 400;
  margin-block: var(--inso-space-md);
}
.check-row input[type="checkbox"] {
  inline-size: 20px; block-size: 20px; flex: none; margin-top: 2px;
  accent-color: var(--inso-blue);
}
.check-row a { font-weight: 600; }

.form-hint { font-size: var(--inso-text-small); color: var(--inso-muted); margin-top: var(--inso-space-2xs); }

/* Honeypot: off-screen and inert — never display:none (bots fill it) */
.honeypot {
  position: absolute !important; inset-inline-start: -9999px !important;
  top: 0 !important; inline-size: 1px !important; block-size: 1px !important;
  overflow: hidden !important; opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Errors: summary + inline ---- */
.form-alert {
  background: var(--inso-danger-bg);
  border-inline-start: 4px solid var(--inso-danger);
  color: var(--inso-danger-ink);
  padding: var(--inso-space-sm) var(--inso-space-md);
  border-radius: var(--inso-radius-sm);
  margin-bottom: var(--inso-space-md);
  font-size: var(--inso-text-small);
}
.form-alert strong { display: block; margin-bottom: var(--inso-space-2xs); }
.form-error-list { margin: var(--inso-space-xs) 0 0; padding-inline-start: 1.2rem; }
.form-error-list a { color: var(--inso-danger-ink); font-weight: 600; }

.field-error {
  display: block; color: var(--inso-danger-ink);
  font-size: var(--inso-text-small); font-weight: 600;
  margin-top: var(--inso-space-2xs);
}
.field-error::before { content: "⚠ "; }
.errorlist {
  list-style: none; padding: 0; margin: var(--inso-space-xs) 0 0;
  color: var(--inso-danger-ink); font-size: var(--inso-text-small); font-weight: 600;
}
.errorlist li::before { content: "⚠ "; }

/* ---- Notices / alerts ---- */
.notice {
  background: var(--inso-paper);
  border: var(--inso-border); border-inline-start: 3px solid var(--inso-blue);
  border-radius: var(--inso-radius-sm);
  padding: var(--inso-space-md);
  margin-bottom: var(--inso-space-md);
  max-width: var(--inso-narrow);
}
.notice h2 { font-size: var(--inso-text-h3); margin-bottom: var(--inso-space-xs); }
.notice p:last-child { margin-bottom: 0; }
.notice .button { margin-top: var(--inso-space-sm); }

/* ---- State cards (404 / 500 / success) ---- */
.state-card {
  text-align: center; max-width: var(--inso-narrow);
  margin-inline: auto; padding-block: var(--inso-section-y);
}
.state-card > span {
  display: grid; place-items: center;
  inline-size: 4rem; block-size: 4rem; border-radius: 50%;
  background: var(--inso-lime); color: var(--inso-ink);
  font-family: var(--inso-font-serif); font-weight: 600; font-size: 1.5rem;
  margin: 0 auto var(--inso-space-md);
}
.state-card .eyebrow { justify-content: center; }
.state-card h1 { font-size: var(--inso-text-h1); }
.state-card p { color: var(--inso-muted); max-width: 34rem; margin-inline: auto; }
.state-card .button { margin-top: var(--inso-space-md); }
.state-error { border: 1px solid var(--inso-danger); border-radius: var(--inso-radius-lg); background: var(--inso-danger-bg); padding: var(--inso-space-lg); }
.state-error > span { background: var(--inso-danger); color: #fff; }
.state-error p { color: var(--inso-danger-ink); }

/* ==========================================================================
   FAQ accordion — native details/summary, animated open
   ========================================================================== */
.faq-list { max-width: var(--inso-narrow); margin-inline: auto; padding-block-end: var(--inso-section-y); }
.faq-list details { border-top: var(--inso-border); }
.faq-list details:last-child { border-bottom: var(--inso-border); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--inso-space-md);
  padding-block: var(--inso-space-md);
  font-family: var(--inso-font-serif); font-weight: 600;
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  border-radius: var(--inso-radius-sm);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none;
  display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
  border: 1px solid var(--inso-line); color: var(--inso-lime-deep);
  font-family: var(--inso-font-sans); font-size: 1.4rem; font-weight: 400; line-height: 1;
  transition: transform var(--inso-dur-base) var(--inso-ease-out),
              background var(--inso-dur-fast) var(--inso-ease-out);
}
.faq-list details[open] summary::after { transform: rotate(135deg); background: var(--inso-lime); border-color: var(--inso-lime); color: var(--inso-ink); }
.faq-list details > div {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--inso-dur-slow) var(--inso-ease-out);
}
.faq-list details[open] > div { grid-template-rows: 1fr; }
.faq-list details > div > * { overflow: hidden; min-block-size: 0; }
.faq-list details > div p { color: var(--inso-muted); padding-block-end: var(--inso-space-md); }

/* ==========================================================================
   Prose (CMS body) + profile
   ========================================================================== */
.prose { max-width: var(--inso-narrow); padding-block: var(--inso-space-md) var(--inso-section-y); }
.prose > :first-child { font-size: var(--inso-text-lead); }
.prose h2, .prose h3 { margin-top: var(--inso-space-lg); }
.prose p { color: #3e515e; }
.prose .button { margin-top: var(--inso-space-md); }
.profile { display: grid; gap: var(--inso-space-md); align-items: start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--inso-ink); color: var(--inso-muted-on-dark);
  padding-block: var(--inso-space-xl) var(--inso-space-md);
}
.footer-grid { display: grid; gap: var(--inso-space-lg); padding-block-end: var(--inso-space-lg); }
.footer-logo { display: block; width: 9.5rem; height: auto; margin-block-end: var(--inso-space-sm); }
.site-footer strong { color: #fff; display: block; margin-bottom: var(--inso-space-xs); }
.site-footer p { font-size: var(--inso-text-small); max-width: 20rem; }
.site-footer a { color: var(--inso-muted-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--inso-lime); text-decoration: underline; text-underline-offset: 0.25em; }
.footer-grid > div > a {
  display: block; min-block-size: 44px; align-content: center;
  padding-block: var(--inso-space-2xs);
}
.site-footer a[href^="tel:"] { font-size: var(--inso-text-lead); color: #fff; font-weight: 600; }

/* ==========================================================================
   Login card (redaktion sign-in)
   ========================================================================== */
.login-card {
  max-width: 27.5rem; margin: var(--inso-space-xl) auto;
  background: var(--inso-paper); border: var(--inso-border);
  border-radius: var(--inso-radius-lg); box-shadow: var(--inso-shadow-md);
  padding: var(--inso-space-lg) var(--inso-space-md);
}
.login-card h1 { font-size: var(--inso-text-h2); }
.login-card p { color: var(--inso-muted); font-size: var(--inso-text-small); }
.login-card label { margin: var(--inso-space-sm) 0; }
.login-card .button { width: 100%; margin-top: var(--inso-space-md); }

/* ==========================================================================
   Mock / preview banners — must stay visible (no silent mock mode)
   ========================================================================== */
.mock-banner, .preview-banner {
  background: var(--inso-warn-bg); color: var(--inso-warn-ink);
  font-size: var(--inso-text-small); text-align: center;
  padding: var(--inso-space-xs) var(--inso-space-md);
  border-bottom: 2px solid var(--inso-warn-ink);
}
.preview-banner { position: sticky; top: 0; z-index: var(--inso-z-flash); }
.preview-banner a { color: var(--inso-warn-ink); font-weight: 700; margin-inline-start: var(--inso-space-sm); }

/* ==========================================================================
   Redaktion editor (kept working — no redesign, just kept styled)
   ========================================================================== */
.editor-shell { max-width: 70rem; margin-inline: auto; padding: var(--inso-space-lg) var(--inso-shell-gutter) var(--inso-space-xl); }
.editor-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--inso-space-sm); margin-bottom: var(--inso-space-md);
}
.editor-top h1 { font-size: var(--inso-text-h2); margin: 0; }
.editor-grid { display: grid; gap: var(--inso-space-md); }
.editor-card {
  background: var(--inso-paper); border: var(--inso-border);
  border-radius: var(--inso-radius-lg); padding: var(--inso-space-md);
}
.editor-card h2 { font-size: var(--inso-text-h3); }
.editor-card p { color: var(--inso-muted); font-size: var(--inso-text-small); }
.editor-actions { display: flex; flex-wrap: wrap; gap: var(--inso-space-xs); margin-top: var(--inso-space-sm); }
.editor-form { max-width: var(--inso-narrow); }
.editor-form label { margin: var(--inso-space-md) 0; }
.editor-form textarea { min-block-size: 12rem; font-family: var(--inso-font-mono); font-size: var(--inso-text-small); }
.editor-note {
  background: var(--inso-mist); border-inline-start: 3px solid var(--inso-blue);
  padding: var(--inso-space-sm) var(--inso-space-md);
  border-radius: var(--inso-radius-sm); font-size: var(--inso-text-small);
}
.revision-list { list-style: none; padding: 0; margin: 0; }
.revision-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--inso-space-xs); padding-block: var(--inso-space-sm);
  border-top: var(--inso-border); font-size: var(--inso-text-small);
}
.revision-pagination {
  display: flex; flex-wrap: wrap; gap: var(--inso-space-xs);
  align-items: center; margin-top: var(--inso-space-md); font-size: var(--inso-text-small);
}
.revision-pagination a, .revision-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 44px; min-block-size: 44px;
  padding: var(--inso-space-2xs) var(--inso-space-sm);
  border: var(--inso-border); border-radius: var(--inso-radius-sm);
  text-decoration: none;
}
.revision-pagination a:hover { background: var(--inso-mist); }
.revision-pagination [aria-current="page"] { background: var(--inso-ink); color: #fff; border-color: var(--inso-ink); font-weight: 700; }

/* ==========================================================================
   Breakpoints — min-width only, base = phone
   ========================================================================== */

/* ---- sm: 36rem / 576px ---- */
@media (min-width: 36rem) {
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .profile { grid-template-columns: 1.4fr 1fr; gap: var(--inso-space-lg); }
  .login-card { padding: var(--inso-space-lg); }
}

/* ---- md: 48rem / 768px ---- */
@media (min-width: 48rem) {
  /* Header keeps the hamburger dropdown up to 64rem: 5 links + CTA button
     do not fit beside the brand at tablet widths (verified overflow at 768px) */
  /* Mobile CTA bar retires; its body compensation goes away with it */
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .form-wrap { grid-template-columns: 1fr 20rem; align-items: start; }
  .form-wrap aside {
    background: var(--inso-navy); color: #fff;
    border-radius: var(--inso-radius-lg); padding: var(--inso-space-md);
    position: sticky; top: calc(var(--inso-header-h) + var(--inso-space-md));
  }
  .form-wrap aside h2 { color: #fff; font-size: var(--inso-text-h3); }
  .form-wrap aside p { color: var(--inso-muted-on-dark); }
  .form-wrap aside a { color: var(--inso-lime); }
  .editor-grid { grid-template-columns: repeat(2, 1fr); }
  .button { min-block-size: 50px; }
}

/* ---- lg: 64rem / 1024px ---- */
@media (min-width: 64rem) {
  /* Header: horizontal nav, toggle retired (moved up from 48rem: the full
     link row overflows at tablet widths) */
  .header-inner { min-block-size: var(--inso-header-h); gap: var(--inso-space-lg); }
  .nav-toggle { display: none; }
  .site-nav {
    display: flex; position: static;
    max-block-size: none; overflow: visible;
    background: transparent; border: 0; box-shadow: none;
    padding: 0; flex-direction: row; align-items: center;
    gap: var(--inso-space-md); margin-inline-start: auto;
  }
  .site-nav a {
    display: inline-flex; align-items: center;
    min-block-size: 44px; padding: var(--inso-space-xs) var(--inso-space-2xs);
    border-bottom: 2px solid transparent; font-size: var(--inso-text-small);
    white-space: nowrap;
  }
  .site-nav a:hover { color: #fff; border-bottom-color: var(--inso-lime); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--inso-lime); }
  .site-nav a.button {
    margin-top: 0;
    margin-inline-start: var(--inso-space-xs);
    align-self: center;
    width: auto;
  }

  .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ---- xl: 80rem / 1280px ---- */
@media (min-width: 80rem) {
  .hero::after { /* restrained geometry echo on very wide screens */
    content: ""; position: absolute; inset-inline-end: -10rem; top: -12rem;
    inline-size: 36rem; block-size: 36rem; border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.08); pointer-events: none;
  }
}

/* ==========================================================================
   Atmosphere — layered, work-related background visuals (CSS/SVG only).
   Every layer is decorative: pointer-events none, low opacity, and the
   hero content always paints above (.hero-grid z-index 1). Text contrast
   is untouched — layers sit behind text on the same surfaces.
   ========================================================================== */

/* ---- Film grain over the whole page: faint paper texture, classic feel ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000;
  pointer-events: none; opacity: var(--inso-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Hero: sunrise glow + lime horizon hairline (the brand story:
   a sun rising after debt) ---- */
.hero::before { /* layered sunrise glow, never overpowering */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transform: translateY(var(--hero-drift, 0px)); /* scroll parallax, set by JS */
  background:
    linear-gradient(to top, rgb(185 217 87 / 0.45) 0, rgb(185 217 87 / 0.45) 1px, transparent 1px),
    radial-gradient(46rem 30rem at 74% 112%, rgb(185 217 87 / 0.3), transparent 62%),
    radial-gradient(30rem 20rem at 88% 110%, rgb(185 217 87 / 0.14), transparent 60%);
}
/* ---- Hero: concentric sunrise arcs, slow breathing (separate layer so the
   xl-breakpoint circle echo on .hero::after keeps working) ---- */
.hero-atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='1100' cy='1100' r='220' opacity='0.15'/%3E%3Ccircle cx='1100' cy='1100' r='360' opacity='0.12'/%3E%3Ccircle cx='1100' cy='1100' r='500' opacity='0.09'/%3E%3Ccircle cx='1100' cy='1100' r='640' opacity='0.065'/%3E%3Ccircle cx='1100' cy='1100' r='780' opacity='0.05'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -12rem bottom -12rem / 68rem 68rem,
    radial-gradient(60rem 34rem at 80% 115%, rgb(185 217 87 / 0.16), transparent 60%);
  animation: inso-breathe var(--inso-dur-breathe) ease-in-out infinite alternate;
}
@keyframes inso-breathe {
  /* --hero-drift / --hero-fade are set on .hero by the rAF scroll driver;
     they compose with the breathe so parallax + fade never fight the loop. */
  from { opacity: calc(0.72 * var(--hero-fade, 1)); transform: translateY(var(--hero-drift, 0px)) scale(1); }
  to   { opacity: calc(1 * var(--hero-fade, 1));    transform: translateY(var(--hero-drift, 0px)) scale(1.025); }
}

/* ---- Angebot: faint contour lines — complexity resolving into clarity ---- */
.band-offer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='none' stroke='%2307182b' stroke-width='1.5'%3E%3Cpath d='M-20 130 C 110 100 200 160 340 118 S 520 88 600 128' opacity='0.05'/%3E%3Cpath d='M-20 190 C 120 160 210 220 350 178 S 520 148 600 188' opacity='0.04'/%3E%3Cpath d='M-20 250 C 130 220 220 280 360 238 S 520 208 600 248' opacity='0.03'/%3E%3Cpath d='M-20 310 C 140 280 230 340 370 298 S 520 268 600 308' opacity='0.025'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -9rem top -3rem;
  background-size: 34rem 34rem;
}

/* ---- Schritte: law = structure — pinstripe + classic double rules ---- */
.band-steps {
  border-top: 4px double var(--inso-line-faint);
  border-bottom: 4px double var(--inso-line-faint);
  background-image: repeating-linear-gradient(-45deg, rgb(7 24 43 / 0) 0 10px, rgb(7 24 43 / 0.025) 10px 11px);
}

/* ---- Final CTA: soft vignette + double rule, quiet send-off ---- */
.final-cta {
  border-top: 4px double var(--inso-line-faint);
  background: radial-gradient(48rem 24rem at 50% 120%, rgb(185 217 87 / 0.1), transparent 62%);
}

/* ==========================================================================
   Scroll reveals — added by JS only (no-JS stays fully visible).
   transform + opacity only; staggered on the steps where no hover
   transition exists (cards keep their hover lift delay-free).
   ========================================================================== */
.inso-reveal {
  opacity: 0; transform: translateY(28px) scale(0.985);
  transition: opacity var(--inso-dur-reveal) var(--inso-ease-expo),
              transform var(--inso-dur-reveal) var(--inso-ease-expo);
  will-change: opacity, transform;
}
.inso-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
/* Cascade stagger is set inline by JS (90ms steps, max 5) and cleared after
   the entrance so hover lifts on cards stay delay-free. */

/* ---- Scroll progress: 2px lime bar fixed just under the sticky header.
   transform-only, pointer-events none, no layout shift. ---- */
.scroll-progress {
  position: fixed; top: var(--inso-header-h-mobile); left: 0; right: 0;
  height: 2px; z-index: 99; pointer-events: none;
}
.scroll-progress > span {
  display: block; height: 100%; background: var(--inso-lime);
  transform: scaleX(0); transform-origin: left center;
}
@media (min-width: 64rem) {
  .scroll-progress { top: var(--inso-header-h); }
}

/* ---- Steps connector: faint track that draws left→right as the section
   scrolls through (desktop only; --steps-progress set by JS). Rendered only
   when JS motion is active, so no-JS pages never show an empty track. ---- */
.steps-progress { display: none; }
@media (min-width: 64rem) {
  .inso-motion .steps-progress {
    display: block; height: 2px; border-radius: 2px; overflow: clip;
    background: var(--inso-line-faint); margin-block-end: var(--inso-space-md);
  }
  .steps-progress > span {
    display: block; height: 100%; background: var(--inso-lime-deep);
    transform: scaleX(var(--steps-progress, 0)); transform-origin: left center;
  }
}

/* ==========================================================================
   Motion — restrained, disabled on request
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .faq-list details > div, .nav-toggle > span { transition: none !important; }
  /* Atmosphere: static, fully visible, no motion at all */
  .hero-atmos { animation: none !important; opacity: 1; transform: none; }
  .visitor-ai-assistant { transition: none !important; }
  .hero::before { transform: none; }
  .inso-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Motion layer: fully parked — progress bar and steps track hidden,
     kicker rules drawn, hero vars neutralized */
  .scroll-progress, .steps-progress { display: none !important; }
  .eyebrow::before { transform: none !important; }
}

/* ==========================================================================
   Animated element library — semantic placements
   Harold's upload (static/img/elements/animated/, 22 motifs). The icons use
   cream strokes: they sit directly on dark bands, and inside .el-chip discs
   on light sections so every stroke stays legible. Animations are
   self-contained CSS keyframes inside each SVG (prefers-reduced-motion safe).
   ========================================================================== */
.el { display: block; height: auto; }
/* icon size scale — icons are accents, never dominant */
.el-hero { width: clamp(6.5rem, 13vw, 9rem); }
.el-med { width: 3rem; }
.el-sm { width: 2.25rem; }
.el-xs { display: inline-block; width: 1.35rem; vertical-align: -0.3em; }
.el-chip {
  display: inline-grid; place-items: center; line-height: 0;
  background: var(--inso-ink); border-radius: 50%; padding: .55rem;
}
.el-chip > .el { width: 2.125rem; }
/* hero: sun visual beside the note */
.hero-visual { display: grid; gap: var(--inso-space-md); justify-items: start; align-content: center; }
.hero-photo, .page-photo, .appointment-photo { margin: 0; }
.hero-photo { width: min(100%, 31rem); }
.hero-photo img, .page-photo img, .appointment-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--inso-radius-lg); box-shadow: var(--inso-shadow-md);
}
.hero-photo img { object-position: 58% 52%; }
.hero-photo figcaption, .appointment-photo figcaption {
  margin-top: var(--inso-space-xs); color: var(--inso-muted-on-dark);
  font-size: var(--inso-text-caption);
}
.page-photo { max-width: 42rem; margin-block: 0 var(--inso-space-lg); }
.page-photo img { border-color: var(--inso-line); box-shadow: var(--inso-shadow-sm); object-position: center; }
.page-photo--portrait { max-width: 23rem; }
.page-photo--portrait img { aspect-ratio: 2 / 3; object-position: 50% 42%; }
.page-photo figcaption { margin-top: var(--inso-space-xs); color: var(--inso-muted); font-size: var(--inso-text-caption); }
.appointment-intro-grid { display: grid; gap: var(--inso-space-lg); align-items: center; }
.appointment-photo { max-width: 22rem; justify-self: end; }
.appointment-photo img { object-position: 30% 50%; border-color: var(--inso-line); box-shadow: var(--inso-shadow-sm); }
.appointment-photo figcaption { color: var(--inso-muted); }
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; align-items: center; }
  .appointment-intro-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); }
}
/* icon rhythm inside components */
.facts .el-chip, .steps .el-chip, .price-card .el-chip, .profile .el-chip { margin-bottom: var(--inso-space-sm); }
/* page-head: icon at the side of the kicker block */
.page-head-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--inso-space-lg); }
.page-head-grid > div:first-child { min-width: 0; }
.page-head-grid .el-chip { flex: none; }
@media (max-width: 44rem) {
  .el-hero { width: 6rem; }
  .page-head-grid .el-chip { padding: .5rem; }
  .page-head-grid .el-chip > .el { width: 1.75rem; }
  .hero-photo { width: 100%; }
  .hero-photo img { object-position: 62% 50%; }
  .appointment-photo { max-width: none; justify-self: stretch; }
  .appointment-photo img { max-height: 14rem; }
  .page-photo--portrait { max-width: 18rem; }
}

/* Appointment wizard */
.appointment-intro { padding-block: 0 var(--inso-space-md); color: var(--inso-muted); }
.appointment-trust { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); border-block: var(--inso-border); padding-block: var(--inso-space-sm); margin-block-end: var(--inso-space-md); color: var(--inso-ink); font-size: var(--inso-text-small); }
.wizard-shell { padding-block-end: var(--inso-section-y); }
.wizard-progress { overflow: hidden; margin-block-end: var(--inso-space-md); }
.wizard-progress ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; min-width: 0; list-style: none; padding: 0; margin: 0; }
.wizard-progress li { display: flex; align-items: center; gap: .45rem; color: var(--inso-muted); font-size: var(--inso-text-caption); border-bottom: 3px solid var(--inso-line-faint); padding: .55rem .25rem; }
.wizard-progress li span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--inso-line); border-radius: 50%; font-weight: 700; }
.wizard-progress li[aria-current="step"] { color: var(--inso-ink); border-bottom-color: var(--inso-lime-deep); font-weight: 700; }
.wizard-progress li[aria-current="step"] span { background: var(--inso-lime); border-color: var(--inso-lime); color: var(--inso-ink); }
@media (min-width: 48rem) { .wizard-progress ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wizard-form { max-width: none; }
.wizard-panel { max-width: 50rem; }
.wizard-panel h2 { margin-block: .2rem var(--inso-space-sm); }
.wizard-panel fieldset { margin-block: var(--inso-space-md); }
.wizard-panel fieldset label { margin-block: var(--inso-space-sm); }
.wizard-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--inso-space-sm); margin-top: var(--inso-space-lg); }
.button-quiet { background: transparent; color: var(--inso-ink); border-color: var(--inso-line); }
.choice-card, .slot-card { display: flex !important; gap: .75rem; align-items: flex-start; border: 1px solid var(--inso-line); border-radius: var(--inso-radius-md); padding: var(--inso-space-md); cursor: pointer; }
.choice-card:has(input:checked), .slot-card:has(input:checked) { border-color: var(--inso-lime-deep); box-shadow: 0 0 0 2px rgb(185 217 87 / .25); }
.choice-card input, .slot-card input { margin-top: .2rem; flex: none; }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { color: var(--inso-muted); margin-top: .3rem; font-weight: 400; }
.field-label { display: block; margin-bottom: var(--inso-space-xs); font-weight: 600; }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.slot-card { align-items: center; padding: .75rem; }
.slot-label { font-weight: 600; }
.notice-quiet { margin-block: var(--inso-space-md); padding: var(--inso-space-sm); background: var(--inso-mist); border-radius: var(--inso-radius-sm); }
.check-row { align-items: flex-start; }
.check-row input { width: auto; min-block-size: auto; margin-top: .25rem; }
@media (max-width: 36rem) { .appointment-trust { grid-template-columns: 1fr; } .slot-grid { grid-template-columns: 1fr; } .wizard-actions .button { width: 100%; } }

/* Preview-only visitor assistant. The server flag controls whether markup exists. */
.visitor-ai-assistant { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: var(--inso-z-dropdown); max-width: calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
.visitor-ai-assistant.is-open { width: 22rem; }
.visitor-ai-toggle { display: block; width: auto; max-width: 100%; margin-inline-start: auto; border: 1px solid var(--inso-lime); border-radius: var(--inso-radius-pill); padding: .8rem 1rem; background: var(--inso-ink); color: var(--inso-paper); font: inherit; font-weight: 700; box-shadow: var(--inso-shadow-md); cursor: pointer; }
.visitor-ai-panel { max-block-size: min(32rem, calc(100dvh - var(--inso-header-h-mobile) - var(--inso-mobile-cta-h) - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); overflow-y: auto; overscroll-behavior: contain; margin-top: .5rem; padding: 1rem; border: 1px solid var(--inso-line); border-radius: var(--inso-radius-lg); background: var(--inso-paper); box-shadow: var(--inso-shadow-lg); }
.visitor-ai-panel h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.visitor-ai-disclaimer { margin: 0 0 .75rem; color: var(--inso-muted); font-size: var(--inso-text-caption); }
.visitor-ai-log { max-height: 15rem; overflow: auto; margin-block: .5rem; }
.visitor-ai-message { margin: .5rem 0; padding: .5rem .65rem; background: var(--inso-mist); border-radius: var(--inso-radius-sm); white-space: pre-wrap; }
.visitor-ai-message strong { display: block; font-size: var(--inso-text-caption); }
.visitor-ai-panel textarea { width: 100%; min-height: 5rem; resize: vertical; }
.visitor-ai-panel form > .button { margin-top: .55rem; }
.visitor-ai-panel [role="status"] { min-height: 1.2em; margin: .5rem 0 0; color: var(--inso-muted); font-size: var(--inso-text-caption); }
@media (max-width: 47.99rem) { .visitor-ai-assistant { right: max(.65rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--inso-mobile-cta-h) + .65rem + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 1.3rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } }

/* Decision guide: long-form editorial rhythm for the insolvency fit page. */
.guide-breadcrumb { display: flex; gap: .55rem; align-items: center; padding-block: 1rem 0; color: var(--inso-muted); font-size: var(--inso-text-caption); }
.guide-breadcrumb a { color: var(--inso-ink); }
.guide-hero { padding-block-start: var(--inso-space-lg); }
.guide-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--inso-space-md); }
.guide-hero-note { max-width: 23rem; padding: var(--inso-space-md); border-block: var(--inso-border); color: var(--inso-muted); }
.guide-hero-note p:last-child { margin: 0; }
.guide-section { padding-block: var(--inso-section-y); }
.guide-section--intro { padding-top: calc(var(--inso-section-y) * .7); }
.guide-section-heading { max-width: 42rem; margin-bottom: var(--inso-space-lg); }
.guide-section-heading h2 { margin: 0; }
.guide-split { display: grid; gap: var(--inso-space-lg); align-items: start; }
.guide-split .prose { max-width: 35rem; }
.guide-checklist { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: var(--inso-border); }
.guide-checklist li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: var(--inso-border); color: var(--inso-ink); }
.guide-checklist li::before { content: "✓"; position: absolute; left: 0; top: 1rem; color: var(--inso-lime-deep); font-weight: 800; }
.guide-band { background: var(--inso-mist); border-block: var(--inso-border); }
.guide-band--accent { background: var(--inso-ink); color: var(--inso-paper); border-color: var(--inso-ink); }
.guide-band--accent .eyebrow, .guide-band--accent p { color: var(--inso-muted-on-dark); }
.guide-card-grid { display: grid; gap: var(--inso-space-md); }
.guide-card { position: relative; min-height: 100%; padding: var(--inso-space-md); background: var(--inso-paper); border: var(--inso-border); border-radius: var(--inso-radius-md); }
.guide-card-number { display: block; margin-bottom: var(--inso-space-sm); color: var(--inso-lime-deep); font-weight: 800; letter-spacing: .08em; }
.guide-card h3 { margin-top: 0; }
.guide-card p { margin-bottom: 0; color: var(--inso-muted); }
.guide-not-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--inso-space-lg); max-width: 62rem; border-top: var(--inso-border); }
.guide-not-list p { margin: 0; padding: var(--inso-space-md) 0; border-bottom: var(--inso-border); }
.guide-not-list strong { display: block; margin-bottom: .3rem; color: var(--inso-ink); }
.guide-steps { display: grid; gap: 0; max-width: 52rem; list-style: none; padding: 0; margin: 0; border-top: var(--inso-border); counter-reset: guide-step; }
.guide-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--inso-space-sm); padding: var(--inso-space-md) 0; border-bottom: var(--inso-border); }
.guide-steps li > span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--inso-lime-deep); border-radius: 50%; color: var(--inso-ink); font-weight: 800; }
.guide-steps h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.guide-steps p { margin: 0; color: var(--inso-muted); }
.guide-decision-grid { display: grid; gap: var(--inso-space-lg); }
.guide-decision { padding: var(--inso-space-md) 0; }
.guide-decision--ready { padding: var(--inso-space-lg); background: var(--inso-lime); color: var(--inso-ink); border-radius: var(--inso-radius-md); }
.guide-decision--ready .eyebrow, .guide-decision--ready p { color: var(--inso-ink); }
.guide-decision--ready .button { background: var(--inso-ink); color: var(--inso-paper); border-color: var(--inso-ink); }
.guide-decision h2 { margin-top: 0; }
.guide-decision p { max-width: 36rem; }
.guide-faq { padding-bottom: calc(var(--inso-section-y) * 1.15); }
.guide-final-cta { margin-top: 0; }
@media (min-width: 48rem) {
  .guide-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .guide-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-decision-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
@media (min-width: 62rem) {
  .guide-hero .page-head-grid { grid-template-columns: 1.2fr .8fr; align-items: end; }
}
@media (max-width: 61.99rem) {
  .guide-hero .page-head-grid { flex-direction: column; align-items: stretch; }
  .guide-hero .page-head-grid > div { width: 100%; max-width: none; }
}
@media (max-width: 38rem) {
  .guide-hero-actions .button { width: 100%; }
  .guide-not-list { grid-template-columns: 1fr; }
  .guide-card { padding: var(--inso-space-md) var(--inso-space-sm); }
}