/* smarTender — Color tokens (Claude Design, canonical source)
   Derived from brand assets: logo gradient (#922CB3 → #5F316E),
   wave-background texture accent (#9C00FF). */

:root {
  /* ---- Brand scale: violet ---- */
  --violet-50:  #f8ecfd;
  --violet-100: #f0d6fb;
  --violet-200: #e0aef4;
  --violet-300: #cd82ec;
  --violet-400: #b350dd;
  --violet-500: #922cb3;
  --violet-600: #7c2699;
  --violet-700: #5f316e;
  --violet-800: #47254f;
  --violet-900: #2e1636;

  --violet-accent: #9c00ff;

  --brand-gradient: linear-gradient(150deg, #922cb3 0%, #5f316e 100%);
  --brand-gradient-bright: linear-gradient(150deg, #9c00ff 0%, #7c2699 100%);

  /* ---- Neutrals (cool, slightly violet-tinted) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf9fb;
  --neutral-100: #f4f2f6;
  --neutral-200: #e8e5ec;
  --neutral-300: #d5d0dc;
  --neutral-400: #a49dae;
  --neutral-500: #736a80;
  --neutral-600: #574f63;
  --neutral-700: #3d3648;
  --neutral-800: #272130;
  --neutral-900: #17121e;

  /* ---- Semantic status ---- */
  --success-50:  #e7f6ee;
  --success-500: #1f9d57;
  --success-700: #14713d;
  --warning-50:  #fdf2e0;
  --warning-500: #e08a13;
  --warning-700: #a05c08;
  --danger-50:   #fdeaea;
  --danger-500:  #d83a3a;
  --danger-700:  #a32626;
  --info-50:     #e9eefb;
  --info-500:    #3358d4;
  --info-700:    #223b92;

  /* ================= Semantic aliases ================= */
  --color-primary:         var(--violet-700);
  --color-primary-raw:     var(--violet-500);
  --color-primary-hover:   var(--violet-600);
  --color-primary-active:  var(--violet-700);
  --color-primary-subtle:  var(--violet-50);
  --color-accent:          var(--violet-accent);

  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-on-brand: var(--neutral-0);
  --text-link:     var(--violet-600);

  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-hover:   var(--neutral-100);
  --surface-inverse: var(--violet-900);
  --surface-inverse-hover: var(--violet-800);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--violet-400);

  --status-success-fg: var(--success-700);
  --status-success-bg: var(--success-50);
  --status-success-50: var(--success-50);
  --status-success-500: var(--success-500);
  --status-success-700: var(--success-700);
  --status-warning-fg: var(--warning-700);
  --status-warning-bg: var(--warning-50);
  --status-warning-50: var(--warning-50);
  --status-warning-500: var(--warning-500);
  --status-warning-700: var(--warning-700);
  --status-warning-text: var(--warning-700);
  --status-danger-fg:  var(--danger-700);
  --status-danger-bg:  var(--danger-50);
  --status-danger-50:  var(--danger-50);
  --status-danger-500: var(--danger-500);
  --status-danger-700: var(--danger-700);
  --status-info-fg:    var(--info-700);
  --status-info-bg:    var(--info-50);
  --status-info-50:    var(--info-50);
  --status-info-500:   var(--info-500);
  --status-info-700:   var(--info-700);

}
/* smarTender — Typography tokens
   Product fonts: Rubik (headings/display) and Figtree (body), loaded via
   @fontsource from the application entry points. See tokens/fonts.css. */

:root {
  --font-heading: "Rubik", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, sans-serif;
  --font-display: "Rubik", system-ui, sans-serif;
  /* Role token from the Claude export, kept for parity. No rule consumes it and
     JetBrains Mono is deliberately not loaded in the browser — only the
     Vergabe-Antrag PDF sets figures in it, from a TTF in the backend. */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.20 minor-third-ish, tuned) */
  /* Body copy size from the Claude Design export (body{font-size:15px}). The
     numeric scale below has no 15px step, and --text-body is already a colour
     token, hence the explicit role name. */
  --font-size-body: 0.9375rem; /* 15 */

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
}

/* Text-style utility classes */
.text-display { font-family: var(--font-heading); font-size: 2rem; line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
.text-title { font-family: var(--font-heading); font-size: 1.5rem; line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
.text-heading { font-family: var(--font-heading); font-size: 1rem; line-height: var(--leading-normal); font-weight: var(--weight-semibold); }
.text-subheading { font-family: var(--font-heading); font-size: 0.875rem; line-height: var(--leading-normal); font-weight: var(--weight-semibold); }
.text-body-large { font-family: var(--font-body); font-size: 1rem; line-height: var(--leading-normal); font-weight: var(--weight-regular); }
.text-body { font-family: var(--font-body); font-size: 0.875rem; line-height: var(--leading-normal); font-weight: var(--weight-regular); }
.text-body-strong { font-family: var(--font-body); font-size: 0.875rem; line-height: var(--leading-normal); font-weight: var(--weight-semibold); }
.text-body-light { font-family: var(--font-body); font-size: 0.875rem; line-height: var(--leading-normal); font-weight: var(--weight-regular); }
.text-link { font-family: var(--font-body); font-size: 0.875rem; line-height: var(--leading-normal); font-weight: var(--weight-regular); }
.text-caption { font-family: var(--font-body); font-size: 0.75rem; line-height: var(--leading-normal); font-weight: var(--weight-regular); }
/* smarTender — Radii, shadows, motion, layering (Claude Design) */

:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* Shadows — soft, cool, low-spread (violet-tinted) */
  --shadow-xs: 0 1px 2px rgba(46, 22, 54, 0.06);
  --shadow-sm: 0 2px 6px rgba(46, 22, 54, 0.08);
  --shadow-md: 0 8px 20px rgba(46, 22, 54, 0.10);
  --shadow-lg: 0 18px 40px rgba(46, 22, 54, 0.14);
  --shadow-brand: 0 10px 26px rgba(146, 44, 179, 0.30);

  --ring-focus: 0 0 0 3px rgba(179, 80, 221, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* Compatibility */
  --duration-standard: var(--duration-normal);

  /* Z-index */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 400;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;
}

/* Skeleton gradient */
:root {
  --gradient-skeleton-end: linear-gradient(270deg, #816B95 0%, #5F316E 100%);
  --gradient-skeleton-middle: linear-gradient(270deg, #C2B7CC 0%, #816B95 100%);
  --gradient-skeleton-start: linear-gradient(90deg, #C2B7CC 0%, #E7E2EC 100%);
  --gradient-verlaufliladark: linear-gradient(44deg, #58206A 0%, #962DB8 100%);
  --gradient-verlaufpurple: linear-gradient(225deg, #922CB2 0%, #5F316E 100%);
}
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-semibold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/assets/fonts/rubik-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  font-family: var(--font-body);
  color: var(--text-strong);
  background: var(--surface-page);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { max-width: 34rem; margin: 8vh auto; padding: 2rem; background: var(--surface-card); border-radius: var(--radius-lg); }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }
nav a { min-height: 44px; display: inline-flex; align-items: center; }
label { display: grid; gap: .35rem; margin: 1rem 0; font-weight: 650; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; min-height: 44px; padding: .7rem .8rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-card); }
textarea { resize: vertical; }
button { min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: var(--radius-sm); color: var(--text-on-brand); background: var(--color-primary); font-weight: 750; cursor: pointer; }
button:hover { background: var(--color-primary-hover); }
a { color: var(--text-link); font-weight: 700; }
a, button, input, select, textarea { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--border-focus); }
[hidden] { display: none !important; }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: var(--surface-card); text-decoration: none; }
.button-secondary:hover { color: var(--text-on-brand); background: var(--color-primary-hover); }
.button-link { display: inline-flex; align-items: center; min-height: 44px; }
.legal-links { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.5rem 1rem 2rem; font-size: .9rem; }
.legal-links a { min-height: 44px; display: inline-flex; align-items: center; }
.legal-links form { margin: 0; }
.logout-link { min-height: 44px; padding: 0; color: var(--text-link); background: transparent; }
.logout-link:hover { color: var(--color-primary); background: transparent; text-decoration: underline; }

.skip-link { position: fixed; z-index: var(--z-toast); top: 8px; left: 8px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-card); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.app-shell { display: flex; min-height: 100vh; background: var(--surface-page); }
.app-sidebar { position: sticky; top: 0; display: flex; flex: 0 0 264px; flex-direction: column; height: 100vh; overflow: auto; background: var(--surface-inverse); }
.app-sidebar a:focus-visible { outline-color: var(--neutral-0); }
.brand { display: flex; min-height: 76px; align-items: center; padding: 20px; }
.brand img { display: block; width: auto; height: 30px; }
.app-sidebar nav { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 0 16px; }
.nav-label { padding: 6px 12px 4px; color: rgba(255,255,255,.48); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-sidebar nav a { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.76); font-size: 15px; font-weight: 550; text-decoration: none; }
.app-sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-sidebar nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.13); }
.app-sidebar nav svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-caption { display: grid; gap: 3px; margin: 12px 16px; padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.4; }
.sidebar-caption strong { color: rgba(255,255,255,.86); }
.app-workspace { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.app-topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.app-topbar > strong { font-family: var(--font-heading); font-size: 18px; }
.account-chip { display: flex; align-items: center; gap: 10px; }
.account-chip > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--text-on-brand); background: var(--brand-gradient); font-size: 12px; font-weight: 800; }
.account-chip div { display: grid; gap: 1px; }
.account-chip strong { font-size: 13.5px; line-height: 1.2; }
.account-chip small { color: #797186; font-size: 11.5px; }
.portal-content { width: 100%; max-width: 1440px; flex: 1; margin: 0 auto; padding: 26px 28px 40px; background: transparent; border-radius: 0; }
.portal-content > :first-child { margin-top: 0; }
.page-heading { margin: 0 0 18px; }
.page-heading h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.7rem,3vw,2.25rem); letter-spacing: -.025em; }
.page-heading p { max-width: 48rem; margin: 6px 0 0; color: #574f63; line-height: 1.5; }
.surface, .package, .addons, .materials { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.surface { padding: 20px 22px; }
.empty-state { padding: 28px; color: #797186; text-align: center; }
.home-hero, .hero { color: var(--text-on-brand); background: var(--brand-gradient); box-shadow: var(--shadow-brand); }
.home-hero { position: relative; overflow: hidden; max-width: 920px; padding: clamp(28px,5vw,52px); border-radius: var(--radius-lg); }
.home-hero::after { position: absolute; right: -70px; bottom: -100px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.07); content: ""; }
.home-hero > * { position: relative; z-index: 1; }
.home-hero > span { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.home-hero h1 { margin: 8px 0; font-family: var(--font-heading); font-size: clamp(2rem,5vw,3rem); letter-spacing: -.03em; }
.home-hero p { max-width: 580px; color: rgba(255,255,255,.84); line-height: 1.55; }
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.home-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border-radius: var(--radius-md); color: var(--color-primary); background: var(--surface-card); text-decoration: none; }
.home-actions .button-secondary { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.12); }
.record-sections, .profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.record-sections .surface:last-child, .profile-grid .surface:nth-child(2) { grid-column: 1 / -1; }
.surface h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 17px; }
.record-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.record-list li { min-width: 0; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-page); overflow-wrap: anywhere; }
.record-list li p { margin: 5px 0 0; color: #574f63; line-height: 1.5; }
.record-list time { color: var(--text-body); font-size: 12px; }
.finance-table-wrap { overflow-x: auto; }
.finance-table { width: 100%; border-collapse: collapse; }
.finance-table th, .finance-table td { padding: 13px 12px; border-bottom: 1px solid #f0edf2; text-align: left; vertical-align: top; }
.finance-table th { color: #797186; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.finance-table td { font-size: 13px; }
.finance-table small { color: #797186; line-height: 1.45; }
.provisions-karte { margin-top: 16px; }
.karten-hauptwert { margin: 2px 0 14px; font-family: var(--font-heading); font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 750; letter-spacing: -.02em; }
.karten-werte { display: grid; gap: 10px; margin: 0 0 14px; }
.karten-werte div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #f0edf2; }
.karten-werte dt { color: #797186; }
.karten-werte dd { margin: 0; font-weight: 700; }
.karten-werte small { color: #574f63; font-weight: 400; }
/* Die mögliche Provision ist optisch getrennt und ausdrücklich unverbindlich
   (PRD-016 §5.1) — eigene Fläche, nie zum Hauptwert addiert. */
.karten-schaetzung { display: grid; gap: 3px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #c9ecd8; border-radius: var(--radius-md); background: #e7f6ee; color: #0f6234; }
.karten-schaetzung span { font-size: 13px; }
.mandanten-liste { margin-top: 16px; }
.mandanten-table-wrap { overflow-x: auto; }
.mandanten-table { width: 100%; border-collapse: collapse; }
.mandanten-table caption { padding: 0 0 10px; color: #797186; font-size: 12px; text-align: left; }
.mandanten-table th, .mandanten-table td { padding: 13px 12px; border-bottom: 1px solid #f0edf2; text-align: left; vertical-align: top; }
.mandanten-table th { color: #797186; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.mandanten-table td { font-size: 13px; }
.mandanten-table td > * { min-width: 0; }
.mandanten-table .vorgang-organisation { font-weight: 700; }
.stufenleiste { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.stufenleiste li { display: inline-flex; align-items: center; padding: 3px 9px; border: 1.5px solid #797186; border-radius: 999px; color: #574f63; background: var(--surface-card); font-size: 11px; font-weight: 650; }
.stufe-hinter { background: #f0edf2; }
.stufe-aktuell { color: var(--text-on-brand); background: var(--brand-gradient); border-color: transparent; font-weight: 750; }
.stufe-bevorstehend { border-style: dashed; background: transparent; }
.stufe-entfaellt { border-color: transparent; color: #797186; background: transparent; text-decoration: line-through; }
.statustext { margin: 7px 0 0; color: var(--text-body); font-weight: 650; }
.mandant-daten { display: grid; gap: 2px; margin: 0; }
.mandant-daten dt { color: #797186; font-size: 12px; }
.mandant-daten dd { margin: 0; }
.mandant-paket, .mandant-kontakt { margin: 6px 0 0; color: #574f63; }
.mandant-kontakt a { overflow-wrap: anywhere; }
.ceo-nachricht { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #f0edf2; }
.ceo-nachricht h3 { margin: 0 0 4px; color: #574f63; font-size: 12px; }
.ceo-nachricht p { margin: 0; white-space: pre-line; }
.provisions-summe { display: inline-block; }
.seiten { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.seiten a { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 16px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); font-weight: 700; text-decoration: none; }
.seiten a:hover { color: var(--text-on-brand); background: var(--color-primary-hover); }
.seiten p { margin: 0; color: #574f63; }
.leerzustand { text-align: center; }
.leerzustand .empty-state { padding: 12px 0; }
.leerzustand .button-secondary { margin-top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status-pill { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.status-open { color: var(--color-primary-hover); background: var(--color-primary-subtle); }
.status-planned { color: #8a5b08; background: #fff3d8; }
.status-paid { color: #14713d; background: #e7f6ee; }
.status-offset { color: #574f63; background: #f0edf2; }
.finance-documents { margin-top: 16px; }
.key-values { display: grid; gap: 12px; margin: 0; }
.key-values div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #f0edf2; }
.key-values dt { color: #797186; }
.key-values dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.catalog { max-width: none; margin: 0; padding: 0; background: transparent; }
.hero { padding: 22px 24px; border-radius: var(--radius-lg); }
.hero h1 { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; }
.hero p { max-width: 560px; line-height: 1.55; color: #f4e7f7; }
.hero strong { display: inline-flex; margin-top: .5rem; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.16); }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(255px,100%),1fr)); gap: 16px; align-items: stretch; margin-top: 16px; }
.package { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.package h2 { font-size: 1.1rem; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.package .price { font-size: 1.8rem; font-weight: 750; margin: .6rem 0 0; }
.package dl { margin: 0; border-top: 1px solid #eee; padding-top: .7rem; }
.package dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.package dd { font-weight: 700; margin: 0; text-align: right; }
.package ul { padding-left: 1.3rem; line-height: 1.5; }
.recommended { background: var(--brand-gradient); color: var(--text-on-brand); border: 0; }
.recommended a, .recommended small { color: var(--text-on-brand); }
.badge { font-size: .7rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(255,255,255,.22); }
.estimate { margin-top: auto; padding: 16px 18px; border-radius: 13px; background: #e7f6ee; border: 1px solid #c9ecd8; color: #0f6234; display: grid; gap: .35rem; }
.recommended .estimate { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.estimate span { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; }
.estimate strong { font-size: 1.7rem; }
.estimate small { line-height: 1.4; }
.addons, .materials { margin-top: 16px; padding: 20px 22px; }
.addons h2, .materials h2 { margin: 0; }
.addons > div, .materials > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr)); gap: 12px; }
.addons article { padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-page); border: 1px solid var(--border-subtle); display: grid; gap: .35rem; }
.addons h3, .addons p { margin: .25rem 0; }
.addons article > strong { font-size: 1.3rem; }
.materials > p { color: #574f63; }
.material-download { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 13px 15px; border-radius: var(--radius-md); background: var(--surface-page); border: 1px solid var(--border-subtle); text-decoration: none; }
.material-download:hover { box-shadow: 0 4px 12px rgba(46,22,54,.1); border-color: #e2c6ee; }
.material-download > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; color: var(--text-strong); }
.material-download strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-download small { color: #574f63; }
.pdf-badge { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); background: var(--color-primary-subtle); color: var(--color-primary-hover); font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.download-mark { font-size: 1.4rem; }
.catalog footer { padding: 1rem 0; color: #574f63; }

.lead-page { max-width: 760px; margin: 0 auto; padding: 0; background: transparent; }
.form-error { margin: 0 0 1rem; padding: 1rem 1.15rem; border: 1px solid var(--status-danger-500); border-left-width: 4px; border-radius: var(--radius-md); color: var(--status-danger-fg); background: var(--status-danger-bg); }
.form-error:focus { outline: 3px solid var(--border-focus); outline-offset: 3px; }
.form-error h2 { margin: 0 0 .35rem; font-family: var(--font-heading); font-size: 1.05rem; }
.form-error p { margin: .2rem 0 0; line-height: 1.5; }
.field-error { display: block; margin-top: .25rem; color: var(--status-danger-fg); font-size: .9rem; }
[aria-invalid="true"] { border-color: var(--status-danger-500); }
.lead-wizard { overflow: hidden; border: 1px solid #e5dfe8; border-radius: 1.2rem; background: #fff; box-shadow: 0 12px 34px rgba(50,20,55,.1); }
.lead-wizard__header { padding: clamp(1.25rem,4vw,2.25rem); color: var(--text-on-brand); background: var(--brand-gradient); }
.lead-wizard__header h1 { margin: 0 0 .45rem; font-family: var(--font-heading); font-size: clamp(1.55rem,4vw,2.15rem); }
.wizard-progress { margin: 0; color: #f5eaf8; }
.wizard-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.wizard-steps li { position: relative; display: grid; justify-items: center; gap: .4rem; text-align: center; color: #e8d2ee; }
.wizard-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 18px; left: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: rgba(255,255,255,.35); }
.wizard-steps span { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; font-weight: 800; }
.wizard-steps [aria-current="step"] span, .wizard-steps .is-complete span { color: var(--color-primary); background: var(--surface-card); border-color: var(--surface-card); }
.wizard-steps small { font-size: .75rem; }
.lead-wizard__body { min-height: 27rem; padding: clamp(1.25rem,4vw,2.25rem); }
.lead-wizard fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lead-wizard [data-lead-step] + [data-lead-step] { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5dfe8; }
.lead-wizard.is-enhanced [data-lead-step] { margin-top: 0; padding-top: 0; border-top: 0; }
.enhanced-only { display: none; }
.lead-wizard.is-enhanced .enhanced-only { display: block; }
.lead-wizard.is-enhanced .no-js-only { display: none; }
.lead-wizard fieldset > legend { width: 100%; margin-bottom: .7rem; font-size: 1.35rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1.25rem; }
.form-grid__wide { grid-column: 1 / -1; }
.form-grid label small { color: #574f63; font-weight: 400; line-height: 1.4; }
.duration-picker { grid-column: 1 / -1; margin: 1rem 0 !important; }
.duration-picker > legend { font-size: 1rem !important; font-weight: 650 !important; }
.duration-picker > div { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; }
.duration-picker label { position: relative; margin: 0; }
.duration-picker input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.duration-picker span { display: grid; place-items: center; min-height: 48px; padding: .65rem; border: 1px solid #cfc8d4; border-radius: .65rem; background: #fff; cursor: pointer; }
.duration-picker input:checked + span { border: 2px solid var(--color-primary-hover); color: var(--color-primary); background: var(--color-primary-subtle); }
.duration-picker input:focus-visible + span { outline: 3px solid var(--border-focus); outline-offset: 3px; }
.lead-review { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin: 1.4rem 0 0; }
.lead-wizard.is-enhanced .lead-review.enhanced-only { display: grid; }
.lead-review div { min-width: 0; padding: 1rem; border: 1px solid #e5dfe8; border-radius: .7rem; background: #faf8fb; }
.lead-review dt { color: #574f63; font-size: .8rem; font-weight: 700; }
.lead-review dd { margin: .3rem 0 0; overflow-wrap: anywhere; font-weight: 650; white-space: pre-wrap; }
.lead-wizard__actions { display: flex; align-items: center; gap: .75rem; padding: 1rem clamp(1.25rem,4vw,2.25rem); border-top: 1px solid #e5dfe8; background: #faf8fb; }
.lead-wizard__actions [data-step-hint] { flex: 1; color: #574f63; font-size: .85rem; }

.lead-success { position: relative; max-width: 42rem; margin: 10vh auto 3rem; padding: clamp(2rem,7vw,4rem); text-align: center; box-shadow: 0 12px 34px rgba(50,20,55,.1); }
.success-mark { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1.25rem; border-radius: 50%; color: #fff; background: #167247; font-size: 2.5rem; font-weight: 800; }
.lead-success h1 { margin-bottom: .75rem; font-size: clamp(1.8rem,6vw,2.5rem); }
.lead-success__thanks { margin: 0 auto 1.75rem; max-width: 32rem; color: #574f63; line-height: 1.6; }
.lead-success__confetti { position: fixed; inset: 0; z-index: var(--z-overlay); width: 100%; height: 100%; pointer-events: none; }
.lead-summary { display: grid; gap: .6rem; margin: 0 0 1.75rem; padding: 1.25rem 1.4rem; border: 1px solid #e5dfe8; border-radius: var(--radius-md); background: #faf8fb; text-align: left; }
.lead-summary div { display: grid; grid-template-columns: minmax(9rem,38%) 1fr; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid #f0edf2; }
.lead-summary div:last-child { padding-bottom: 0; border-bottom: 0; }
.lead-summary dt { color: #574f63; font-size: .85rem; font-weight: 700; }
.lead-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.lead-summary dd.multiline-text { white-space: pre-line; }
.lead-summary__role { font-weight: 400; }
.lead-success__next { margin: 0 0 1.75rem; text-align: left; }
.lead-success__next h2 { margin: 0 0 .6rem; font-family: var(--font-heading); font-size: 1.15rem; }
.lead-success__next ul { margin: 0; padding-left: 1.3rem; color: #574f63; line-height: 1.7; }
.lead-success__estimate { margin: 0 0 1.75rem; padding: 1.1rem 1.4rem; border: 1px solid #c9ecd8; border-radius: var(--radius-md); background: #e7f6ee; color: #0f6234; }
.lead-success__estimate p { margin: 0 0 .3rem; font-weight: 650; }
.lead-success__estimate strong { font-size: 1.15rem; }
.lead-success__estimate small { line-height: 1.4; }
.lead-success__actions { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 520px) {
  main { margin: 1rem; padding: 1.25rem; }
  .hero { padding: 20px; }
  .package { padding: 18px; }
  .package dl div { align-items: start; }
  .package dd { white-space: normal; }
  .wizard-steps small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .form-grid, .lead-review { grid-template-columns: 1fr; }
  .form-grid__wide { grid-column: auto; }
  .duration-picker > div { grid-template-columns: repeat(2,1fr); }
  .lead-wizard__actions { flex-wrap: wrap; }
  .lead-wizard__actions [data-step-hint] { flex-basis: 100%; order: -1; }
  .lead-wizard__actions button { flex: 1; }
  .lead-success { margin: 1rem; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .app-sidebar { position: static; width: 100%; height: auto; overflow: visible; }
  .brand { min-height: 64px; justify-content: center; padding: 16px; }
  .app-sidebar nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0 10px 12px; }
  .nav-label, .sidebar-caption { display: none; }
  .app-sidebar nav a { min-width: 0; justify-content: center; padding: 10px 6px; font-size: 12px; text-align: center; }
  .app-sidebar nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-sidebar nav svg { width: 17px; height: 17px; }
  .app-topbar { position: static; padding: 0 16px; }
  .account-chip div { display: none; }
  .portal-content { padding: 20px 16px 32px; }
  .record-sections, .profile-grid { grid-template-columns: 1fr; }
  .record-sections .surface:last-child, .profile-grid .surface:nth-child(2) { grid-column: auto; }
}

@media (max-width: 620px) {
  .app-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-table, .finance-table tbody, .finance-table tr, .finance-table td { display: block; width: 100%; }
  .finance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .finance-table tr { padding: 8px 0; border-bottom: 1px solid #e8e5ec; }
  .finance-table td { display: grid; grid-template-columns: minmax(105px,40%) 1fr; gap: 12px; padding: 8px 0; border: 0; }
  .finance-table td::before { color: #797186; font-size: 11px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; content: attr(data-label); }
  .finance-table td > * { min-width: 0; }
  .mandanten-table, .mandanten-table tbody, .mandanten-table tr, .mandanten-table td { display: block; width: 100%; }
  .mandanten-table thead, .mandanten-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mandanten-table tr { padding: 10px 0; border-bottom: 1px solid #e8e5ec; }
  .mandanten-table td { display: grid; grid-template-columns: minmax(105px,40%) 1fr; gap: 12px; padding: 8px 0; border: 0; }
  .mandanten-table td::before { color: #797186; font-size: 11px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; content: attr(data-label); }
  .mandanten-table td.leerzustand { display: block; }
  .mandanten-table td.leerzustand::before { content: none; }
  .surface { padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.payout-celebration{padding:1.25rem;border-radius:var(--radius-lg);background:var(--status-success-bg);color:var(--status-success-fg);animation:payout-pop .6s ease-out}.payout-celebration span{font-size:2rem}@keyframes payout-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}