/* ============================================================
   ATOM.SENDGRID.CSS — SendGrid Style Guide Theme für Atom.js
   Quelle: https://styleguide.sendgrid.com/stats.html (+ colors,
   buttons, alerts, modals, tables, text-fields, typography)
   Drop-in Ersatz / Ergänzung zu atom.gui.css.
   Neue Datei: atom.sendgrid.css
   Fonts: Proxima Nova kommt aus /modules/base/assets/fonts.css
   (global in der App-Shell geladen, hier per @import abgesichert).
   Colfax ist kommerziell und liegt nicht lokal vor → Heading-Stack
   fällt auf Proxima Nova zurück (siehe Sektion 1b).
   ============================================================ */

/* Load application fonts explicitly in the app shell. */

/* ── 1b. Colfax (optional, selbst hosten) ────────────────────
   Sobald lizenzierte Colfax-Dateien vorliegen, diese in
   /modules/base/assets/fonts/ ablegen und den Block entkommentieren:
   @font-face {
     font-family: "Colfax";
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     src: url("/modules/base/assets/fonts/Colfax-Light.woff2") format("woff2");
   }
   @font-face {
     font-family: "Colfax";
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url("/modules/base/assets/fonts/Colfax-Medium.woff2") format("woff2");
   }
   Bis dahin greift automatisch "Proxima Nova" als Heading-Fallback.
*/

/* ── 1. SendGrid Design Tokens ──────────────────────────────
   Primary: SendGrid Blue #1A82E2, Slate #294661
   Charting: Ron Burgundy #b71c1c, Burnt Orange #ff5722,
   Carrot #ff9900, Mango #fdd835, Mantis #18c96e,
   Spruce #4cb04f, Cobalt #303f9f, Bluebird #2196f3,
   Seafoam #00bcd4, Crown #7b1fa2, Wild Strawberry #ff4081,
   Steel #9e9e9e. Logo-Accents: #99e1f4 / #00b3e3 / #009dd9.
   Typografie: Colfax (Headings + Numerals), Proxima Nova (Body).
*/
:root {
  /* Brand */
  --sg-blue:            #1a82e2;
  --sg-blue-hover:      #1267b8;
  --sg-blue-active:     #0b5783;
  --sg-blue-pale:       #e9f2fc;
  --sg-blue-pale-border:#b8d7f3;
  --sg-slate:           #294661;
  --sg-slate-dark:      #1e3448;
  --sg-slate-light:     #546b81;
  --sg-slate-lighter:   #7b93a7;
  --sg-steel:           #9e9e9e;
  --sg-mist:            #f4f6f7;
  --sg-mist-dark:       #e9edf0;
  --sg-border:          #d4dde6;
  --sg-border-strong:   #b7c5d1;

  /* Semantik */
  --sg-danger:          #f0544e;
  --sg-danger-hover:    #d9433d;
  --sg-danger-deep:     #b71c1c;
  --sg-danger-bg:       #fdecea;
  --sg-danger-border:   #f5b5b2;
  --sg-burnt-orange:    #ff5722;
  --sg-success:         #18c96e;
  --sg-success-deep:    #107a45;
  --sg-success-bg:      #e6f6ed;
  --sg-success-border:  #9fdcbd;
  --sg-spruce:          #4cb04f;
  --sg-warning:         #ff9900;
  --sg-warning-deep:    #7a4a00;
  --sg-warning-bg:      #fff4e0;
  --sg-warning-border:  #f5c86e;
  --sg-mango:           #fdd835;
  --sg-cobalt:          #303f9f;
  --sg-bluebird:        #2196f3;
  --sg-seafoam:         #00bcd4;
  --sg-crown:           #7b1fa2;
  --sg-strawberry:      #ff4081;

  /* Logo Accents */
  --sg-accent-light:    #99e1f4;
  --sg-accent-medium:   #00b3e3;
  --sg-accent-dark:     #009dd9;

  /* Typografie — Colfax rundet auf Proxima Nova ab (siehe 1b) */
  --sg-font-heading:    "Colfax", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sg-font-body:       "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sg-font-mono:       "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Mapping auf atom.gui.css Variablen, damit Fallbacks stimmen */
  --bg:                 #ffffff;
  --fg:                 var(--sg-slate);
  --card-bg:            #ffffff;
  --popover-bg:         #ffffff;
  --primary:            var(--sg-blue);
  --primary-fg:         #ffffff;
  --secondary:          #ffffff;
  --secondary-fg:       var(--sg-slate);
  --muted:              var(--sg-mist);
  --muted-fg:           var(--sg-slate-light);
  --accent:             var(--sg-blue-pale);
  --accent-fg:          var(--sg-slate);
  --destructive:        var(--sg-danger);
  --destructive-fg:     #ffffff;
  --success:            var(--sg-success);
  --success-fg:         #ffffff;
  --warning:            var(--sg-warning);
  --warning-fg:         #ffffff;
  --border:             var(--sg-border);
  --input-border:       var(--sg-border);
  --ring:               var(--sg-blue);
  --ring-offset:        #ffffff;
  --radius:             2px;
  --radius-sm:          2px;
  --radius-md:          2px;
  --radius-lg:          4px;
  --radius-xl:          6px;
  --radius-full:        9999px;
  --font:               var(--sg-font-body);
  --font-mono:          var(--sg-font-mono);
  --shadow-sm:          0 1px 2px rgb(41 70 97 / 0.08);
  --shadow:             0 1px 3px rgb(41 70 97 / 0.12);
  --shadow-md:          0 2px 8px rgb(41 70 97 / 0.14);
  --shadow-lg:          0 8px 24px rgb(41 70 97 / 0.18);
  --shadow-xl:          0 16px 48px rgb(41 70 97 / 0.22);
  --transition:         0.15s ease;
}

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

.gui * { font-family: var(--sg-font-body); }
.gui h1, .gui h2, .gui h3, .gui h4,
.gui Card .title, .gui .DialogPanel .title, .gui .Modal .title,
.gui .Sheet .title, .gui .AlertDialog .title {
  font-family: var(--sg-font-heading);
  color: var(--sg-slate);
}

/* ── 2. Buttons (.btn / .ActionButton) ──────────────────────
   Styleguide: .btn + .btn-primary / .btn-secondary / .btn-danger,
   .btn-small, .has-icon, .has-badge, .is-disabled, .is-loading,
   .btn-group / .btn-group-item.is-active, .btn-save.
*/
.ActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 2px;
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  min-height: 36px;
  padding: 0 18px;
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.ActionButton:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.ActionButton:disabled, .ActionButton[disabled], .ActionButton[aria-disabled="true"] { pointer-events: none; opacity: 0.45; }

.ActionButton.sm { min-height: 28px; padding: 0 12px; font-size: 12px; }
.ActionButton.md { min-height: 36px; padding: 0 18px; font-size: 13px; }
.ActionButton.lg { min-height: 44px; padding: 0 24px; font-size: 14px; }
.ActionButton.icon { height: 36px; width: 36px; padding: 0; }
.ActionButton.icon Icon, .ActionButton.icon img { width: 15px; height: 15px; display: block; }

/* primary = SendGrid Blue */
.ActionButton.primary { background-color: var(--sg-blue); color: #fff; border-color: var(--sg-blue); }
.ActionButton.primary:hover:not(:disabled) { background-color: var(--sg-blue-hover); border-color: var(--sg-blue-hover); }
.ActionButton.primary:active:not(:disabled) { background-color: var(--sg-blue-active); border-color: var(--sg-blue-active); }

/* secondary = white + slate border (SendGrid .btn-secondary) */
.ActionButton.secondary { background-color: #fff; color: var(--sg-slate); border-color: var(--sg-border-strong); }
.ActionButton.secondary:hover:not(:disabled) { background-color: var(--sg-mist); border-color: var(--sg-slate-light); color: var(--sg-slate-dark); }

/* destructive / danger = SendGrid Red */
.ActionButton.destructive { background-color: var(--sg-danger); color: #fff; border-color: var(--sg-danger); }
.ActionButton.destructive:hover:not(:disabled) { background-color: var(--sg-danger-hover); border-color: var(--sg-danger-hover); }

.ActionButton.outline { background-color: transparent; color: var(--sg-blue); border-color: var(--sg-blue); }
.ActionButton.outline:hover:not(:disabled) { background-color: var(--sg-blue-pale); }
.ActionButton.ghost { background-color: transparent; color: var(--sg-slate); border-color: transparent; }
.ActionButton.ghost:hover:not(:disabled) { background-color: var(--sg-mist-dark); color: var(--sg-slate-dark); }
.ActionButton.link { background: none; border: none; color: var(--sg-blue); text-decoration: underline; text-underline-offset: 3px; min-height: 0; padding: 0; }
.ActionButton.link:hover:not(:disabled) { color: var(--sg-blue-hover); }

/* Loading-Zustand (.is-loading) */
.ActionButton.is-loading { position: relative; pointer-events: none; opacity: 0.75; }
.ActionButton.is-loading::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.4); border-top-color: currentColor;
  animation: sg-spin 0.75s linear infinite;
}

/* ── 3. Badge ─────────────────────────────────────────────── */
Badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 10px;
  padding: 2px 8px;
  font-family: var(--sg-font-body);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
Badge.default { background-color: var(--sg-slate); color: #fff; border-color: var(--sg-slate); }
Badge.secondary { background-color: var(--sg-mist-dark); color: var(--sg-slate); border-color: var(--sg-border); }
Badge.destructive { background-color: var(--sg-danger); color: #fff; border-color: var(--sg-danger); }
Badge.success { background-color: var(--sg-success); color: #fff; border-color: var(--sg-success); }
Badge.warning { background-color: var(--sg-warning); color: #fff; border-color: var(--sg-warning); }
Badge.outline { background: #fff; color: var(--sg-slate); border-color: var(--sg-border-strong); }
Badge.ghost { background: var(--sg-mist); color: var(--sg-slate-light); border-color: transparent; }

/* ── 4. Alerts (.alert) ─────────────────────────────────────
   .alert + .alert-success / .alert-warning / .alert-danger /
   .alert-promo / .alert-verification / .alert-trial / .alert-beta
*/
Alert {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start;
  padding: 12px 16px;
  border-radius: 2px;
  border: 1px solid var(--sg-border);
  border-left-width: 4px;
  background-color: #fff;
  font-family: var(--sg-font-body);
  font-size: 13px; line-height: 1.5; color: var(--sg-slate);
  box-shadow: var(--shadow-sm);
}
Alert.default { border-left-color: var(--sg-blue); background: #fff; }
Alert.destructive { background: var(--sg-danger-bg); border-color: var(--sg-danger-border); border-left-color: var(--sg-danger-deep); color: var(--sg-danger-deep); }
Alert.destructive AlertDescription { color: var(--sg-danger-deep); }
Alert.success { background: var(--sg-success-bg); border-color: var(--sg-success-border); border-left-color: var(--sg-success); color: var(--sg-slate); }
Alert.success AlertDescription { color: var(--sg-success-deep); }
Alert.warning { background: var(--sg-warning-bg); border-color: var(--sg-warning-border); border-left-color: var(--sg-warning); color: var(--sg-slate); }
Alert.warning AlertDescription { color: var(--sg-warning-deep); }
AlertTitle { display: block; font-family: var(--sg-font-heading); font-weight: 600; font-size: 14px; margin: 0; color: inherit; }
AlertDescription { display: block; font-size: 13px; line-height: 1.5; color: var(--sg-slate-light); margin: 0; }
Alert a { color: var(--sg-blue); }

/* ── 5. Native dialogs: AlertDialog / Modal / DialogPanel ─────
   atom.gui.js renders <dialog class="AtomDialog …"> with header,
   optional body and footer. Padding lives on those sections.
*/
dialog.AtomDialog.AlertDialog,
dialog.AtomDialog.Modal,
dialog.AtomDialog.DialogPanel {
  font-family: var(--sg-font-body);
  color: var(--sg-slate);
  background: #fff;
  border-radius: 4px;
}
dialog.AtomDialog.AlertDialog::backdrop,
dialog.AtomDialog.Modal::backdrop,
dialog.AtomDialog.DialogPanel::backdrop {
  background: rgb(30 52 72 / 0.6);
}
dialog.AtomDialog.AlertDialog { width: min(28rem, calc(100vw - 2rem)); }
dialog.AtomDialog.DialogPanel.sm, dialog.AtomDialog.Modal.sm { width: min(28rem, calc(100vw - 2rem)); }
dialog.AtomDialog.DialogPanel.lg, dialog.AtomDialog.Modal.lg { width: min(48rem, calc(100vw - 2rem)); }

.AlertDialog .panel,
.Modal .panel,
.DialogPanel .panel {
  padding: 0;
  max-width: none;
  box-shadow: none;
  animation: none;
}

.AlertDialog .title,
.Modal .title,
.DialogPanel .title {
  font-family: var(--sg-font-heading);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--sg-slate);
}
.AlertDialog .description,
.DialogPanel .description {
  font-size: 13px;
  color: var(--sg-slate-light);
  line-height: 1.6;
  margin: 8px 0 0;
}
.AlertDialog .body,
.Modal .body,
.DialogPanel .body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sg-slate);
}
.AlertDialog .footer .ActionButton:first-child { order: 2; }
.AlertDialog .header > .ActionButton.icon,
.Modal .header > .ActionButton.icon,
.DialogPanel .header > .ActionButton.icon {
  color: var(--sg-slate-light);
}

/* ── 6. Side .Sheet (.side-modal) ──────────────────────────── */
.Sheet { display: contents; font-family: var(--sg-font-body); }
.Sheet .overlay { position: fixed; inset: 0; z-index: 50; background-color: rgb(30 52 72 / 0.6); animation: sg-fade-in 0.15s ease; }
.Sheet .panel { position: fixed; z-index: 50; background: #fff; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: auto; }
.Sheet.right .panel { top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; animation: sg-slide-in-right 0.2s ease; }
.Sheet.left .panel { top: 0; left: 0; bottom: 0; width: 420px; max-width: 92vw; animation: sg-slide-in-left 0.2s ease; }
.Sheet.top .panel { top: 0; left: 0; right: 0; min-height: 25vh; }
.Sheet.bottom .panel { bottom: 0; left: 0; right: 0; min-height: 25vh; }
.Sheet .header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--sg-border); gap: 12px; }
.Sheet .header h2.title, .Sheet .title { font-family: var(--sg-font-heading); font-size: 18px; font-weight: 500; margin: 0; color: var(--sg-slate); }
.Sheet .description { font-size: 13px; color: var(--sg-slate-light); margin: 4px 0 0; }
.Sheet .body { flex: 1; padding: 20px 24px; font-size: 13px; line-height: 1.6; }
.Sheet .footer { padding: 16px 24px; border-top: 1px solid var(--sg-border); display: flex; gap: 8px; justify-content: flex-end; background: var(--sg-mist); }

/* ── 7. Stats (.stats-card) ─────────────────────────────────
   Kern des styleguide.sendgrid.com/stats.html: große Colfax-
   Numerals in Slate, Label darunter, Secondary-Variante.
*/
.stats-card, StatsCard {
  display: flex; flex-wrap: wrap; gap: 24px 32px;
  background: #fff; border: 1px solid var(--sg-border); border-radius: 4px;
  padding: 24px; font-family: var(--sg-font-body);
}
.stats-card .stat, StatsCard .stat, .stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
}
.stats-card .stat-value, StatsCard .stat-value, .stat-value {
  font-family: var(--sg-font-heading);
  font-size: 30px; font-weight: 300; line-height: 1.1;
  color: var(--sg-slate);
  font-variant-numeric: tabular-nums;
}
.stats-card .stat-label, StatsCard .stat-label, .stat-label {
  font-size: 12px; font-weight: 400; color: var(--sg-slate-light);
}
.stats-card .stat.mantis .stat-value { color: var(--sg-success); }
.stats-card .stat.carrot .stat-value { color: var(--sg-warning); }
.stats-card .stat.burnt-orange .stat-value { color: var(--sg-burnt-orange); }
.stats-card .stat.ron-burgundy .stat-value { color: var(--sg-danger-deep); }
.stats-card .stat.cobalt .stat-value { color: var(--sg-cobalt); }
.stats-card .stat.bluebird .stat-value { color: var(--sg-bluebird); }
.stats-card .stat.seafoam .stat-value { color: var(--sg-seafoam); }
.stats-card .stat.crown .stat-value { color: var(--sg-crown); }
.stats-card .stat.wild-strawberry .stat-value { color: var(--sg-strawberry); }
.stats-card .stat.steel .stat-value { color: var(--sg-steel); }
.stats-card.secondary .stat-secondary, StatsCard.secondary .stat-secondary {
  display: block; font-size: 12px; color: var(--sg-slate-light);
}
.stats-card.secondary .stat-secondary strong { color: var(--sg-slate); font-weight: 600; }

/* ── 8. Cards ─────────────────────────────────────────────── */
Card, CardHeader, CardContent, CardFooter { display: block; font-family: var(--sg-font-body); }
Card {
  background: #fff; border: 1px solid var(--sg-border); border-radius: 4px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
Card .header, Card CardHeader { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 0; }
Card .header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
Card .title, Card CardTitle { font-family: var(--sg-font-heading); font-size: 18px; font-weight: 500; margin: 0; color: var(--sg-slate); }
Card .description, Card CardDescription { font-size: 13px; color: var(--sg-slate-light); margin: 0; line-height: 1.5; }
Card .actions { display: flex; gap: 8px; }
Card .content, Card CardContent { padding: 20px 24px; font-size: 13px; line-height: 1.6; color: var(--sg-slate); }
Card .footer, Card CardFooter { padding: 0 24px 20px; display: flex; align-items: center; gap: 8px; }

/* ── 9. Forms: Field / TextInput / Textarea / Number / Secret ─
   (.input-text-wrap + .is-required/.is-error/.is-disabled/.is-valid,
   .textarea-wrap, span.input-info)
*/
Field { display: flex; flex-direction: column; gap: 6px; font-family: var(--sg-font-body); }
Field .label { font-size: 13px; font-weight: 600; color: var(--sg-slate); line-height: 1.3; }
Field .hint { font-size: 12px; color: var(--sg-slate-light); line-height: 1.45; }
Field .error { font-size: 12px; color: var(--sg-danger-deep); line-height: 1.45; }
.FieldLabel { display: inline-block; font-size: 13px; font-weight: 600; color: var(--sg-slate); font-family: var(--sg-font-body); }
.FieldLabel[for] { cursor: pointer; }

TextInput, SelectInput, TextareaInput, NumberInput, SecretInput, PasswordInput {
  display: flex; flex-direction: column; font-family: var(--sg-font-body);
}
TextInput.invalid input, SelectInput.invalid select, TextareaInput.invalid textarea,
NumberInput.invalid .control, SecretInput.invalid .control, PasswordInput.invalid .control,
Combobox.invalid .trigger, MultiSelect.invalid { border-color: var(--sg-danger) !important; }
TextInput.invalid input:focus, TextareaInput.invalid textarea:focus { box-shadow: 0 0 0 3px rgb(240 84 78 / 0.15); }

TextInput input, NumberInput .control, SecretInput .control, PasswordInput .control {
  display: flex; height: 36px; width: 100%;
  border-radius: 2px; border: 1px solid var(--sg-border-strong);
  background: #fff; padding: 0 12px;
  font-size: 13px; color: var(--sg-slate); outline: none; font-family: var(--sg-font-body); min-width: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
TextInput input::placeholder, NumberInput .control::placeholder { color: var(--sg-slate-lighter); }
TextInput input:focus, NumberInput .control:focus, SecretInput .control:focus, PasswordInput .control:focus {
  border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15);
}
TextInput input:disabled, NumberInput .control:disabled { background: var(--sg-mist); opacity: 0.7; cursor: not-allowed; }

TextareaInput textarea.control {
  width: 100%; min-height: 88px; border-radius: 2px; border: 1px solid var(--sg-border-strong);
  background: #fff; padding: 8px 12px; font-size: 13px; color: var(--sg-slate); line-height: 1.55;
  resize: vertical; outline: none; font-family: var(--sg-font-body); min-width: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
TextareaInput textarea.control::placeholder { color: var(--sg-slate-lighter); }
TextareaInput textarea.control:focus { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }

SelectInput select.control {
  height: 36px; width: 100%; border-radius: 2px; border: 1px solid var(--sg-border-strong);
  background-color: #fff; padding: 0 32px 0 12px; font-size: 13px; color: var(--sg-slate);
  outline: none; font-family: var(--sg-font-body); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23546b81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; min-width: 0;
}
SelectInput select.control:focus { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }

KeyCap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 2px;
  border: 1px solid var(--sg-border-strong); background: var(--sg-mist);
  font-family: var(--sg-font-mono); font-size: 11px; font-weight: 600;
  color: var(--sg-slate); white-space: nowrap;
}

/* Search (.input-text-wrap.is-search) */
SearchField {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 200px; height: 36px; padding: 0 12px;
  border: 1px solid var(--sg-border-strong); border-radius: 2px;
  background: #fff; font-family: var(--sg-font-body);
}
SearchField:focus-within { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }
SearchField .glass { flex: none; width: 14px; height: 14px; opacity: 0.6; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-slate-light); }
SearchField .glass:empty::before { content: ""; display: block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 999px; box-sizing: border-box; }
SearchField .input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--sg-slate); font-family: inherit; }
SearchField .input::placeholder { color: var(--sg-slate-lighter); }
SearchField .clear, SearchField .prev, SearchField .next { width: 24px; height: 24px; }
SearchField .count { font-size: 12px; color: var(--sg-slate-light); font-variant-numeric: tabular-nums; }
SearchField .nav { display: inline-flex; gap: 2px; }

/* .Checkbox + Radio (SendGrid: 16px Box, Blue Check) */
.Checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-family: var(--sg-font-body); user-select: none; -webkit-user-select: none; }
.Checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border: 1px solid var(--sg-border-strong); border-radius: 2px;
  background: #fff; cursor: pointer; position: relative; flex-shrink: 0;
  transition: background-color var(--transition), border-color var(--transition);
}
.Checkbox input[type="checkbox"]:checked { background: var(--sg-blue); border-color: var(--sg-blue); }
.Checkbox input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 8px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg);
}
.Checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.Checkbox input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.Checkbox .label { color: var(--sg-slate); line-height: 1.4; }

RadioGroup { display: flex; flex-direction: column; gap: 8px; font-family: var(--sg-font-body); }
RadioGroup.horizontal { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.RadioItem { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--sg-slate); user-select: none; -webkit-user-select: none; }
.RadioItem input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border: 1px solid var(--sg-border-strong); border-radius: 50%;
  background: #fff; cursor: pointer; position: relative; flex-shrink: 0;
}
.RadioItem input[type="radio"]:checked { border-color: var(--sg-blue); }
.RadioItem input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sg-blue); }
.RadioItem input[type="radio"]:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.RadioItem .label { color: var(--sg-slate); }

/* .Toggle Switch (SendGrid Switch: Slate off, Blue on) */
.ToggleSwitch {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  outline: none; font-family: var(--sg-font-body); font-size: 13px; color: var(--sg-slate);
}
.ToggleSwitch:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; border-radius: 4px; }
.ToggleSwitch:disabled { opacity: 0.5; cursor: not-allowed; }
.ToggleSwitch .thumb {
  position: relative; display: block; width: 40px; height: 22px; border-radius: 999px;
  background: var(--sg-border-strong); transition: background-color var(--transition); flex-shrink: 0;
}
.ToggleSwitch .thumb::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--transition); pointer-events: none;
}
.ToggleSwitch.checked .thumb { background: var(--sg-blue); }
.ToggleSwitch.checked .thumb::after { transform: translateX(18px); }
.ToggleSwitch .label { color: var(--sg-slate); }

/* Slider */
Slider { display: block; width: 100%; }
Slider .control { appearance: none; -webkit-appearance: none; height: 4px; width: 100%; border-radius: 999px; background: var(--sg-mist-dark); outline: none; cursor: pointer; accent-color: var(--sg-blue); }
Slider .control::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sg-blue); cursor: pointer; box-shadow: var(--shadow-sm);
}
Slider .control::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--sg-blue); cursor: pointer; }
Slider .control:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 4px; }

/* ── 10. Tables (.table-wrap) ─────────────────────────────── */
DataTable {
  display: table; width: 100%; border-collapse: collapse;
  font-size: 13px; color: var(--sg-slate); font-family: var(--sg-font-body);
  background: #fff; border: 1px solid var(--sg-border); border-radius: 4px;
}
TableHeader { display: table-header-group; background: var(--sg-mist); }
TableBody { display: table-row-group; }
TableFooter { display: table-footer-group; background: var(--sg-mist); font-weight: 600; }
TableRow { display: table-row; border-bottom: 1px solid var(--sg-border); transition: background-color var(--transition); }
TableBody TableRow:hover { background: var(--sg-blue-pale); }
TableBody TableRow.is-selected { background: var(--sg-blue-pale); }
TableHead {
  display: table-cell; padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sg-slate-light); white-space: nowrap;
}
TableCell { display: table-cell; padding: 12px 16px; vertical-align: middle; }
TableCell.right, TableHead.right { text-align: right; font-variant-numeric: tabular-nums; }
TableCell.numeric { text-align: right; font-variant-numeric: tabular-nums; }
TableCaption { display: table-caption; caption-side: bottom; margin-top: 12px; font-size: 12px; color: var(--sg-slate-light); text-align: center; }

/* ── 11. Tabs (SendGrid .tab-wrapper) ─────────────────────── */
Tabs { display: block; font-family: var(--sg-font-body); }
Tabs .list { display: flex; align-items: center; gap: 0; border-bottom: 2px solid var(--sg-border); background: transparent; padding: 0; border-radius: 0; }
Tabs .tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; font-size: 13px; font-weight: 400;
  border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  background: none; cursor: pointer; color: var(--sg-slate-light);
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap; font-family: inherit; outline: none; border-radius: 0;
}
Tabs .tab:hover:not(.active) { color: var(--sg-slate); }
Tabs .tab.active { color: var(--sg-blue); border-bottom-color: var(--sg-blue); font-weight: 600; background: none; box-shadow: none; }
Tabs .tab:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
Tabs .panel { margin-top: 16px; outline: none; font-size: 13px; line-height: 1.6; }

/* ── 12. Pagination ───────────────────────────────────────── */
Pagination { display: flex; align-items: center; font-family: var(--sg-font-body); }
Pagination .content { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
Pagination .item { display: inline-flex; }
Pagination .link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 2px;
  font-size: 13px; color: var(--sg-slate); border: 1px solid transparent;
  cursor: pointer; background: none; font-family: inherit;
}
Pagination .link:hover { background: var(--sg-mist); }
Pagination .link.active { background: var(--sg-blue); color: #fff; border-color: var(--sg-blue); }
Pagination .prev, Pagination .next {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 10px; height: 32px; border-radius: 2px;
  font-size: 13px; color: var(--sg-blue); cursor: pointer; border: none; background: none; font-family: inherit;
}
Pagination .prev:hover, Pagination .next:hover { background: var(--sg-blue-pale); }
Pagination .prev:disabled, Pagination .next:disabled { opacity: 0.4; pointer-events: none; }
Pagination .ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--sg-slate-light); }

/* ── 13. Menus / Popover / Tooltip / Toast ────────────────── */
DropdownMenu { position: relative; display: inline-block; font-family: var(--sg-font-body); }
DropdownMenu .content {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  min-width: 200px; background: #fff; border: 1px solid var(--sg-border);
  border-radius: 2px; box-shadow: var(--shadow-md); padding: 4px;
  animation: sg-fade-in-scale 0.1s ease;
}
DropdownMenu .content.align-end { left: auto; right: 0; }
DropdownMenu .label { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sg-slate-light); }
DropdownMenu .item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--sg-slate); cursor: pointer;
  border-radius: 2px; border: none; background: none; width: 100%; text-align: left;
  font-family: inherit;
}
DropdownMenu .item:hover, DropdownMenu .item:focus { background: var(--sg-blue-pale); outline: none; }
DropdownMenu .item.destructive { color: var(--sg-danger-deep); }
DropdownMenu .icon { width: 15px; height: 15px; opacity: 0.8; }
DropdownMenu .shortcut { margin-left: auto; font-size: 11px; color: var(--sg-slate-lighter); font-family: var(--sg-font-mono); }
DropdownMenu .separator { height: 1px; background: var(--sg-border); margin: 4px 0; }

Popover { position: relative; display: inline-block; font-family: var(--sg-font-body); }
Popover .content {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  width: 288px; background: #fff; border: 1px solid var(--sg-border);
  border-radius: 4px; box-shadow: var(--shadow-md); padding: 16px;
  animation: sg-fade-in-scale 0.1s ease; font-size: 13px; line-height: 1.55; color: var(--sg-slate);
}
Popover .content.align-end { left: auto; right: 0; }
Popover .content.align-center { left: 50%; transform: translateX(-50%); }

ActionMenu {
  position: fixed; z-index: 80; min-width: 200px; max-height: calc(100vh - 16px);
  overflow-y: auto; padding: 4px;
  background: #fff; border: 1px solid var(--sg-border); border-radius: 2px;
  box-shadow: var(--shadow-md); font-family: var(--sg-font-body);
}
ActionMenu .item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 2px;
  background: transparent; color: var(--sg-slate); font-size: 13px; font-family: inherit;
  text-align: left; cursor: pointer;
}
ActionMenu .item:hover { background: var(--sg-blue-pale); }
ActionMenu .item:disabled { opacity: 0.4; cursor: default; }
ActionMenu .item.danger { color: var(--sg-danger-deep); }
ActionMenu .icon { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
ActionMenu .icon Icon, ActionMenu .icon img { width: 15px; height: 15px; display: block; }
ActionMenu .shortcut { margin-left: auto; font-size: 11px; color: var(--sg-slate-lighter); font-family: var(--sg-font-mono); }
ActionMenu .separator { height: 1px; background: var(--sg-border); margin: 4px 0; }
ActionMenu .label { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sg-slate-light); }
ActionMenu.record-menu .record-menu-item {
  display: flex; width: 100%; padding: 8px 10px; border: none; border-radius: 2px;
  background: transparent; color: var(--sg-slate); font-size: 13px; font-family: inherit;
  text-align: left; cursor: pointer;
}
ActionMenu.record-menu .record-menu-item:hover { background: var(--sg-blue-pale); }
ActionMenu.record-menu .record-menu-item:disabled { opacity: 0.4; cursor: default; }
ActionMenu.record-menu .record-menu-item.danger { color: var(--sg-danger-deep); }

Tooltip { position: relative; display: inline-flex; }
Tooltip .content {
  position: absolute; z-index: 50; background: var(--sg-slate); color: #fff;
  border-radius: 2px; padding: 6px 10px; font-size: 12px; font-weight: 400;
  white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md);
  font-family: var(--sg-font-body); animation: sg-fade-in-scale 0.1s ease;
}
Tooltip .content::before { content: ""; position: absolute; border: 4px solid transparent; }
Tooltip .content.top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
Tooltip .content.top::before { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--sg-slate); }
Tooltip .content.bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
Tooltip .content.bottom::before { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--sg-slate); }
Tooltip .content.left { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
Tooltip .content.left::before { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--sg-slate); }
Tooltip .content.right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
Tooltip .content.right::before { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--sg-slate); }

Toaster {
  position: fixed; z-index: 100; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; font-family: var(--sg-font-body); max-width: 400px; width: 100%;
}
Toaster.bottom-right { bottom: 24px; right: 24px; align-items: flex-end; }
Toaster.bottom-left { bottom: 24px; left: 24px; align-items: flex-start; }
Toaster.top-right { top: 24px; right: 24px; align-items: flex-end; }
Toaster.top-left { top: 24px; left: 24px; align-items: flex-start; }
Toaster.top-center { top: 24px; left: 50%; transform: translateX(-50%); align-items: center; }
Toaster.bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; }
Toast {
  display: flex; pointer-events: all; align-items: flex-start; gap: 10px;
  background: var(--sg-slate); color: #fff;
  border: none; border-radius: 2px; padding: 12px 16px;
  box-shadow: var(--shadow-lg); width: 100%;
  animation: sg-slide-in-right 0.2s ease; font-size: 13px;
}
Toast .body { flex: 1; min-width: 0; }
Toast .title { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 2px; }
Toast .description { font-size: 12px; color: rgb(255 255 255 / 0.85); line-height: 1.45; margin: 0; }
Toast .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
Toast .close {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 2px; border: none; background: none;
  cursor: pointer; color: rgb(255 255 255 / 0.7); font-size: 14px;
  display: flex; align-items: center; justify-content: center; align-self: flex-start;
}
Toast .close:hover { background: rgb(255 255 255 / 0.15); color: #fff; }
Toast.success { background: var(--sg-success-deep); border-left: 4px solid var(--sg-success); }
Toast.destructive { background: var(--sg-danger-deep); border-left: 4px solid var(--sg-danger); }
Toast.warning { background: var(--sg-slate); border-left: 4px solid var(--sg-warning); }

/* ── 14. Breadcrumb / Progress / Skeleton / Spinner ───────── */
Breadcrumb { display: block; font-family: var(--sg-font-body); }
BreadcrumbList { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--sg-slate-light); }
BreadcrumbItem { display: inline-flex; align-items: center; gap: 6px; }
BreadcrumbLink a { color: var(--sg-blue); text-decoration: none; }
BreadcrumbLink a:hover { text-decoration: underline; }
BreadcrumbPage { color: var(--sg-slate); font-weight: 600; }
BreadcrumbSeparator { color: var(--sg-slate-lighter); user-select: none; }
BreadcrumbEllipsis { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--sg-slate-light); cursor: pointer; }
BreadcrumbEllipsis:hover { color: var(--sg-slate); }

ProgressBar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: var(--sg-mist-dark); font-family: var(--sg-font-body); }
ProgressBar .fill { height: 100%; width: 0; background: var(--sg-blue); border-radius: 999px; transition: width 0.3s ease; }
ProgressBar.success .fill { background: var(--sg-success); }
ProgressBar.destructive .fill { background: var(--sg-danger); }
ProgressBar.warning .fill { background: var(--sg-warning); }

Skeleton {
  display: block; border-radius: 2px;
  background: linear-gradient(90deg, var(--sg-mist-dark) 25%, #f7f9fa 50%, var(--sg-mist-dark) 75%);
  background-size: 200% 100%;
  animation: sg-shimmer 1.5s infinite;
  min-height: 14px;
}
Spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid var(--sg-mist-dark); border-top-color: var(--sg-blue);
  border-radius: 50%; animation: sg-spin 0.75s linear infinite;
  vertical-align: middle; font-size: 0; color: transparent;
}
Spinner.sm { width: 16px; height: 16px; border-width: 2px; }
Spinner.lg { width: 40px; height: 40px; border-width: 4px; }

/* ── 15. Accordion / Collapsible / Separator / ScrollArea ─── */
Accordion { display: flex; flex-direction: column; width: 100%; font-family: var(--sg-font-body); }
AccordionItem { display: block; border: 1px solid var(--sg-border); border-radius: 2px; margin-bottom: 8px; background: #fff; }
AccordionItem .trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px; font-size: 14px; font-weight: 600;
  text-align: left; background: none; border: none; cursor: pointer;
  color: var(--sg-slate); gap: 8px; font-family: var(--sg-font-heading);
}
AccordionItem .trigger:hover { color: var(--sg-blue); }
AccordionItem .trigger:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: -2px; }
AccordionItem .icon { flex-shrink: 0; width: 14px; height: 14px; transition: transform 0.2s ease; display: inline-block; color: var(--sg-slate-light); }
AccordionItem .icon::before { content: "▾"; font-size: 12px; }
AccordionItem.open { border-color: var(--sg-blue); }
AccordionItem.open .icon { transform: rotate(180deg); }
AccordionItem .content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; overflow: hidden; }
AccordionItem.open .content-wrapper { grid-template-rows: 1fr; }
AccordionItem .content-inner { overflow: hidden; }
AccordionItem .content { padding: 0 16px 16px; font-size: 13px; line-height: 1.6; color: var(--sg-slate-light); }

Collapsible { display: block; width: 100%; font-family: var(--sg-font-body); }
Collapsible .trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; font-weight: 600; color: var(--sg-slate); }
Collapsible .content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; overflow: hidden; }
Collapsible.open .content-wrapper { grid-template-rows: 1fr; }
Collapsible .content-inner { overflow: hidden; }
Collapsible .content { padding-top: 8px; font-size: 13px; line-height: 1.6; }

Separator { display: block; background: var(--sg-border); flex-shrink: 0; }
Separator.horizontal { height: 1px; width: 100%; }
Separator.vertical { width: 1px; height: 100%; display: inline-block; }

ScrollArea { display: block; position: relative; overflow: auto; font-family: var(--sg-font-body); }
ScrollArea::-webkit-scrollbar { width: 8px; height: 8px; }
ScrollArea::-webkit-scrollbar-track { background: transparent; }
ScrollArea::-webkit-scrollbar-thumb { background: var(--sg-border-strong); border-radius: 999px; border: 2px solid #fff; }

/* ── 16. SegmentedButton / .Toggle (.btn-group) ─────────────── */
SegmentedButton {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--sg-border-strong); border-radius: 2px;
  overflow: hidden; padding: 0; gap: 0; font-family: var(--sg-font-body); background: #fff;
}
SegmentedButton .item {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-right: 1px solid var(--sg-border);
  background: #fff; color: var(--sg-slate); font-size: 13px; font-weight: 400;
  cursor: pointer; white-space: nowrap; outline: none; font-family: inherit;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  height: 36px; padding: 0 16px;
  transition: background-color var(--transition), color var(--transition);
}
SegmentedButton .item:last-child { border-right: none; }
SegmentedButton .item:hover:not(:disabled):not(.active) { background: var(--sg-mist); }
SegmentedButton .item.active { background: var(--sg-slate); color: #fff; }
SegmentedButton .item:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: -2px; }
SegmentedButton .item:disabled { opacity: 0.5; cursor: not-allowed; }
SegmentedButton .item .seg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  color: inherit; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
SegmentedButton .item .seg-icon.inline-svg {
  background-color: transparent;
  mask: none; -webkit-mask: none;
}
SegmentedButton .item svg {
  width: 14px; height: 14px; display: block; flex-shrink: 0;
  fill: currentColor; stroke: currentColor; color: inherit;
}
SegmentedButton .item svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
SegmentedButton .item svg [fill]:not([fill="none"]) { fill: currentColor; }
SegmentedButton .item Icon, SegmentedButton .item img {
  width: 14px; height: 14px; display: block; flex-shrink: 0; color: inherit;
}
SegmentedButton.sm .item { height: 28px; padding: 0 12px; font-size: 12px; }
SegmentedButton.sm .item .seg-icon,
SegmentedButton.sm .item svg,
SegmentedButton.sm .item Icon,
SegmentedButton.sm .item img {
  width: 12px; height: 12px;
}
SegmentedButton.sm .item.icon-only { width: 28px; padding: 0; }
SegmentedButton.default .item.icon-only { width: 36px; padding: 0; }
SegmentedButton .item.icon-only { width: 36px; padding: 0; }
SegmentedButton.lg .item { height: 44px; padding: 0 20px; }
SegmentedButton.lg .item .seg-icon,
SegmentedButton.lg .item svg,
SegmentedButton.lg .item Icon,
SegmentedButton.lg .item img {
  width: 16px; height: 16px;
}
SegmentedButton.lg .item.icon-only { width: 44px; padding: 0; }

.Toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 2px;
  border: 1px solid transparent; background: transparent; color: var(--sg-slate-light);
  font-size: 13px; cursor: pointer; outline: none; font-family: var(--sg-font-body);
}
.Toggle:hover:not(:disabled) { background: var(--sg-mist); color: var(--sg-slate); }
.Toggle:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.Toggle:disabled { pointer-events: none; opacity: 0.5; }
.Toggle.sm { height: 28px; padding: 0 10px; }
.Toggle.lg { height: 44px; padding: 0 16px; }
.Toggle.outline { border-color: var(--sg-border-strong); }
.Toggle.pressed { background: var(--sg-slate); color: #fff; }

/* ── 17. MultiSelect / Combobox / Tags / Color / Image ─────── */
MultiSelect {
  display: block; position: relative; width: 100%; min-height: 36px;
  border-radius: 2px; border: 1px solid var(--sg-border-strong);
  background: #fff; padding: 4px 8px; font-size: 13px; color: var(--sg-slate);
  cursor: text; font-family: var(--sg-font-body);
}
MultiSelect.open { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }
MultiSelect.disabled { background: var(--sg-mist); cursor: not-allowed; }
MultiSelect .inner { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
MultiSelect .chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px;
  padding: 0 4px 0 8px; border-radius: 11px;
  background: var(--sg-slate); color: #fff; font-size: 12px; line-height: 1; white-space: nowrap;
}
MultiSelect .chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: none; background: transparent;
  color: rgb(255 255 255 / 0.8); font-size: 12px; border-radius: 50%; cursor: pointer; padding: 0;
}
MultiSelect .chip-remove:hover { background: var(--sg-danger); color: #fff; }
MultiSelect .input { flex: 1 1 64px; min-width: 64px; border: none; outline: none; background: transparent; font-size: 13px; color: var(--sg-slate); font-family: inherit; height: 24px; }
MultiSelect .input::placeholder { color: var(--sg-slate-lighter); }
MultiSelect .dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--sg-border); border-radius: 2px;
  box-shadow: var(--shadow-md); max-height: 224px; overflow-y: auto;
}
MultiSelect .option { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--sg-slate); }
MultiSelect .option:hover { background: var(--sg-blue-pale); }
MultiSelect .empty { padding: 8px 12px; font-size: 13px; color: var(--sg-slate-light); text-align: center; }

Combobox { display: block; position: relative; width: 100%; font-family: var(--sg-font-body); font-size: 13px; }
Combobox .trigger {
  display: flex; align-items: center; min-height: 36px;
  border-radius: 2px; border: 1px solid var(--sg-border-strong);
  background: #fff; padding: 0 8px 0 12px; gap: 4px; cursor: pointer;
}
Combobox.open .trigger { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }
Combobox.disabled .trigger { background: var(--sg-mist); cursor: not-allowed; }
Combobox .input { flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--sg-slate); font-family: inherit; height: 32px; }
Combobox .input::placeholder { color: var(--sg-slate-lighter); }
Combobox .value { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sg-slate); line-height: 32px; }
Combobox .clear {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; background: transparent;
  color: var(--sg-slate-light); font-size: 14px; border-radius: 50%; cursor: pointer; padding: 0;
}
Combobox .clear:hover { background: var(--sg-danger); color: #fff; }
Combobox .chevron { flex-shrink: 0; font-size: 12px; color: var(--sg-slate-light); pointer-events: none; }
Combobox .dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--sg-border); border-radius: 2px;
  box-shadow: var(--shadow-md); max-height: 224px; overflow-y: auto;
}
Combobox .option { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--sg-slate); }
Combobox .option:hover, Combobox .option.active { background: var(--sg-blue-pale); }
Combobox .option.selected { font-weight: 600; }
Combobox .check { font-size: 12px; color: var(--sg-blue); }
Combobox .empty { padding: 8px 12px; font-size: 13px; color: var(--sg-slate-light); text-align: center; }

TagsInput { display: block; font-family: var(--sg-font-body); }
TagsInput .inner { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; padding: 4px 8px; border: 1px solid var(--sg-border-strong); border-radius: 2px; background: #fff; }
TagsInput .inner:focus-within { border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15); }
TagsInput .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 11px; background: var(--sg-slate); color: #fff; font-size: 12px; }
TagsInput .chip-remove { border: none; background: none; cursor: pointer; color: rgb(255 255 255 / 0.8); line-height: 1; padding: 0; }
TagsInput .chip-remove:hover { color: #fff; }
TagsInput .input { flex: 1; min-width: 96px; border: none; outline: none; background: transparent; font-size: 13px; color: var(--sg-slate); font-family: inherit; }

ColorInput { display: inline-flex; }
ColorInput .control { width: 36px; height: 28px; padding: 2px; border: 1px solid var(--sg-border-strong); border-radius: 2px; background: #fff; cursor: pointer; }

ImageInput { display: inline-flex; align-items: center; gap: 6px; position: relative; }
ImageInput .preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 2px; border: 1px dashed var(--sg-border-strong);
  cursor: pointer; overflow: hidden; background: var(--sg-mist);
}
ImageInput .preview.has-image { border-style: solid; }
ImageInput .preview img { width: 100%; height: 100%; object-fit: cover; }
ImageInput .placeholder { color: var(--sg-slate-light); font-size: 16px; line-height: 1; }
ImageInput .file { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

FileInput { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; position: relative; min-width: 0; font-family: var(--sg-font-body); }
FileInput .file { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
FileInput .files { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
FileInput .chip { display: inline-flex; align-items: center; gap: 4px; max-width: 16rem; padding: 2px 4px 2px 8px; border-radius: 11px; background: var(--sg-slate); color: #fff; font-size: 12px; }
FileInput .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
FileInput .chip-remove { border: none; background: none; cursor: pointer; color: rgb(255 255 255 / 0.8); line-height: 1; padding: 0; }
FileInput .chip-remove:hover { color: #fff; }
FileInput .empty { font-size: 12px; color: var(--sg-slate-light); }

/* ── 18. Avatar / EmptyState / RecordList / Misc ───────────── */
Avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; background: var(--sg-mist-dark);
  color: var(--sg-slate); font-family: var(--sg-font-heading);
  flex-shrink: 0; position: relative; border: 1px solid var(--sg-border);
}
Avatar.sm { width: 32px; height: 32px; font-size: 12px; }
Avatar.default { width: 40px; height: 40px; font-size: 14px; }
Avatar.lg { width: 48px; height: 48px; font-size: 16px; }
Avatar.xl { width: 64px; height: 64px; font-size: 20px; }
Avatar .image { width: 100%; height: 100%; object-fit: cover; }
Avatar .fallback { font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

EmptyState { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; font-family: var(--sg-font-body); background: #fff; border: 1px dashed var(--sg-border-strong); border-radius: 4px; }
EmptyState .icon { margin-bottom: 16px; color: var(--sg-slate-lighter); }
EmptyState .title { font-family: var(--sg-font-heading); font-size: 18px; font-weight: 500; color: var(--sg-slate); margin: 0 0 8px; }
EmptyState .text { font-size: 13px; color: var(--sg-slate-light); line-height: 1.6; margin: 0 0 20px; max-width: 448px; }
EmptyState .action { margin-top: 4px; display: flex; gap: 8px; }

RecordList.record-list {
  display: block; position: relative; flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overflow-anchor: none;
  scrollbar-gutter: stable; scrollbar-width: thin;
  scrollbar-color: var(--sg-border-strong) transparent;
  outline: none; background: #fff; border: 1px solid var(--sg-border); border-radius: 4px;
  font-family: var(--sg-font-body);
}
RecordList.record-list::-webkit-scrollbar { width: 8px; height: 8px; }
RecordList.record-list::-webkit-scrollbar-track { background: transparent; }
RecordList.record-list::-webkit-scrollbar-thumb { background: var(--sg-border-strong); border-radius: 999px; }
RecordList.record-list .record-list-spacer { position: relative; width: 100%; overflow: hidden; }
RecordList.record-list .record-list-window { position: absolute; left: 0; right: 0; top: 0; }
RecordList.record-list .record-list-letter {
  padding: 12px 16px 4px; color: var(--sg-slate-light);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--sg-font-heading);
}
RecordList.record-list .record-list-letter[hidden] { display: none; }
RecordList.record-list .record-list-item {
  display: flex; align-items: center; box-sizing: border-box;
  cursor: default; user-select: none; padding: 0 16px; border-bottom: 1px solid var(--sg-mist-dark);
}
RecordList.record-list .record-list-item:hover { background: var(--sg-blue-pale); }
RecordList.record-list .record-list-item.selected { background: var(--sg-blue-pale); box-shadow: inset 3px 0 0 var(--sg-blue); }
RecordList.record-list .record-list-empty { padding: 24px 16px; color: var(--sg-slate-light); font-size: 13px; text-align: center; }

Icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; width: 1em; height: 1em; }
Icon img { display: block; width: 100%; height: 100%; }

.Stack { display: flex; font-family: var(--sg-font-body); }

InlineRename { display: contents; }
InlineRename .control {
  width: 100%; min-width: 0; height: 32px; padding: 0 8px;
  border: 1px solid var(--sg-blue); border-radius: 2px;
  background: #fff; font-size: 13px; color: var(--sg-slate); font-family: inherit;
  outline: none; box-shadow: 0 0 0 3px rgb(26 130 226 / 0.15);
}

/* ── 19. SendGrid Keyframes (sg- Prefix, kollisionsfrei) ───── */
@keyframes sg-spin { to { transform: rotate(360deg); } }
@keyframes sg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-fade-in-scale { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes sg-zoom-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes sg-slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sg-slide-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

/* Group letters overlay the fixed-height virtual row; they never change its height. */
RecordList .record-list-letter { position: absolute; top: 0; right: 4px; padding: 0; pointer-events: none; }

/* Shared native dialog geometry. Dialog state is owned by Show/onMount. */
dialog.AtomDialog {
  position: fixed; inset: 0; display: block; margin: auto; padding: 0;
  width: min(32rem, calc(100vw - 2rem)); max-width: none;
  height: fit-content; max-height: 90vh;
  border: 0; border-radius: var(--radius-lg); color: var(--fg);
  background: var(--bg); box-shadow: var(--shadow-xl); overflow: auto;
}
dialog.AtomDialog:not([open]) { display: none; }
dialog.AtomDialog::backdrop { background: rgb(0 0 0 / 0.6); }
dialog.AtomDialog.sm { width: min(28rem, calc(100vw - 2rem)); }
dialog.AtomDialog.lg { width: min(48rem, calc(100vw - 2rem)); }
dialog.AtomDialog > .panel {
  position: static; display: block; width: 100%; max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: inherit; box-shadow: none; animation: none;
}
dialog.AtomDialog:not(.Sheet) > .panel > .header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 24px 24px 0;
}
dialog.AtomDialog:not(.Sheet) > .panel > .header > div { flex: 1; min-width: 0; }
dialog.AtomDialog:not(.Sheet) > .panel > .header > .ActionButton.icon {
  flex-shrink: 0; margin: -6px -10px 0 0;
}
dialog.AtomDialog:not(.Sheet) > .panel > .body { padding: 16px 24px 0; }
dialog.AtomDialog:not(.Sheet) > .panel > .body:empty { display: none; }
dialog.AtomDialog:not(.Sheet) > .panel > .footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 24px;
}
dialog.AtomDialog.Sheet { max-height: 100vh; height: 100vh; border-radius: 0; }
dialog.AtomDialog.Sheet.right { margin-right: 0; }
dialog.AtomDialog.Sheet.left { margin-left: 0; }
dialog.AtomDialog.Sheet.top { margin-top: 0; width: 100%; height: auto; }
dialog.AtomDialog.Sheet.bottom { margin-bottom: 0; width: 100%; height: auto; }

dialog.AtomDialog.Sheet > .panel { position: static; inset: auto; width: 100%; max-width: none; height: 100%; }

/* Application primitives: shared structure, theme-owned colors and typography. */
SettingRow {display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border);min-width:0;font-family:var(--font)}
SettingRow .setting-icon {display:inline-flex;flex-shrink:0;color:var(--muted-fg)}
SettingRow .setting-copy {flex:1;min-width:0}
SettingRow .setting-label {font-size:.875rem;font-weight:600;color:var(--fg)}
SettingRow .setting-description {font-size:.8125rem;color:var(--muted-fg);margin-top:.25rem;line-height:1.5}
SettingRow .setting-description:empty {display:none}
SettingRow .setting-control {display:flex;align-items:center;gap:.5rem;flex-shrink:0;max-width:100%}
.Sidebar {box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;width:16rem;max-width:100%;min-height:0;padding:1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);color:var(--fg);font-family:var(--font)}
.Sidebar .sidebar-header,.Sidebar .sidebar-footer {min-width:0;overflow:hidden;overflow-wrap:anywhere}
.Sidebar .sidebar-header:empty,.Sidebar .sidebar-footer:empty {display:none}
.Sidebar .sidebar-header {font-weight:600;padding:.25rem}
.Sidebar .sidebar-footer {border-top:1px solid var(--border);padding-top:.75rem;font-size:.8125rem;color:var(--muted-fg)}
.Sidebar .sidebar-toggle {align-self:flex-end}
.Sidebar .sidebar-nav {display:flex;flex-direction:column;gap:.25rem;min-height:0;overflow-y:auto;flex:1}
.NavItem {box-sizing:border-box;display:flex;align-items:center;gap:.75rem;width:100%;padding:.65rem .75rem;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--muted-fg);font:500 .875rem/1.4 var(--font);text-align:left;text-decoration:none;cursor:pointer;min-width:0}
.NavItem:hover {background:var(--accent);color:var(--fg)}
.NavItem.active {background:var(--secondary);color:var(--fg);font-weight:600}
.NavItem .nav-icon {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}
.NavItem .nav-label {flex:1;overflow-wrap:anywhere}
.NavItem .nav-count {font-size:.75rem;line-height:1.5;min-width:1.5rem;padding:0 .3rem;border-radius:var(--radius-full);background:var(--muted);color:var(--muted-fg);text-align:center}
.NavItem.disabled {opacity:.45;cursor:not-allowed}
.NavItem:focus-visible,.StatCard:focus-visible {outline:2px solid var(--ring);outline-offset:2px}
.Sidebar.collapsed {width:4.75rem;padding:.75rem}
.Sidebar.collapsed .sidebar-header,.Sidebar.collapsed .sidebar-footer {display:none}
.Sidebar.collapsed .NavItem {justify-content:center;padding:.65rem .25rem;min-height:2.75rem;position:relative}
/* Keep names available to assistive technology when only the icon is visible. */
.Sidebar.collapsed .NavItem:has(.nav-icon) .nav-label {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.Sidebar.collapsed .nav-count {display:none}
.Sidebar.collapsed .sidebar-toggle {align-self:center}
Toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.875rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);font-family:var(--font);min-width:0}
Toolbar .toolbar-controls,Toolbar .toolbar-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}
Toolbar .toolbar-controls {flex:1}
Toolbar .toolbar-controls>* {min-width:0;max-width:100%}
Toolbar .toolbar-actions {margin-left:auto}
Toolbar .toolbar-actions:empty {display:none}
SelectionBar {display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);color:var(--secondary-fg);font-family:var(--font)}
SelectionBar[hidden] {display:none}
SelectionBar .selection-label {font-size:.875rem;font-weight:600}
SelectionBar .selection-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.StatCard {box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;min-width:0;width:100%;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);color:var(--fg);font-family:var(--font);text-align:left}
button.StatCard {cursor:pointer}
button.StatCard:hover {background:var(--accent)}
button.StatCard:disabled {opacity:.5;cursor:not-allowed}
.StatCard .stat-heading {display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.875rem;font-weight:500}
.StatCard .stat-icon {display:inline-flex;color:var(--muted-fg)}
.StatCard .stat-value {font-size:2rem;line-height:1.15;font-weight:700;letter-spacing:-.025em;overflow-wrap:anywhere}
.StatCard .stat-description {font-size:.8125rem;line-height:1.5;color:var(--muted-fg)}
.StatCard .stat-description:empty {display:none}
CircularProgress {--circle-size:6rem;--circle-track:.5rem;--circle-color:var(--primary);box-sizing:border-box;display:inline-grid;place-items:center;flex-shrink:0;width:var(--circle-size);height:var(--circle-size);padding:var(--circle-track);border-radius:50%;background:conic-gradient(var(--circle-color) var(--progress,0%),var(--muted) 0);font:600 1rem/1 var(--font);color:var(--fg)}
CircularProgress.sm {--circle-size:3rem;--circle-track:.25rem;font-size:.6875rem}
CircularProgress.lg {--circle-size:9rem;--circle-track:.75rem;font-size:1.5rem}
CircularProgress.success {--circle-color:var(--success)}
CircularProgress.warning {--circle-color:var(--warning)}
CircularProgress.destructive {--circle-color:var(--destructive)}
CircularProgress .progress-center {display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--card-bg)}
SaveStatus {display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;font:.8125rem/1.5 var(--font);color:var(--muted-fg)}
SaveStatus .save-message,SaveStatus .save-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
SaveStatus .save-indicator {display:inline-grid;place-items:center;flex-shrink:0;width:1.25rem;height:1.25rem;border:1px solid currentColor;border-radius:50%;font-weight:600}
SaveStatus.saved .save-indicator {color:var(--success)}
SaveStatus.pending .save-indicator,SaveStatus.saving .save-indicator {color:var(--warning)}
SaveStatus.error {color:var(--destructive)}
AppShell {--shell-columns:minmax(18rem,1fr) minmax(0,2fr);box-sizing:border-box;display:grid;grid-template-columns:var(--shell-columns);min-width:0;min-height:0;height:100%;font-family:var(--font)}
AppShell>.Sidebar {width:auto;max-width:none;min-width:0;min-height:0;height:100%}
AppShell>.shell-main {display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:auto}
CodeBlock {display:block;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--muted);color:var(--fg);font-family:var(--font-mono)}
CodeBlock .code-header {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--card-bg);font-family:var(--font)}
CodeBlock .code-title {font-size:.8125rem;font-weight:600}
CodeBlock .code-lang {font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-fg)}
CodeBlock .code-pre {margin:0;padding:.75rem;overflow:auto;max-height:24rem;font-size:.8125rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
CodeBlock .code-body {font-family:inherit}
Timeline {display:flex;flex-direction:column;gap:.25rem;min-width:0;font-family:var(--font)}
Timeline .timeline-row {display:grid;grid-template-columns:minmax(90px,150px) 1fr 72px;gap:.625rem;align-items:center;margin-top:.3rem}
Timeline .timeline-axis {position:relative;height:1rem;font-size:.6875rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
Timeline .timeline-tick {position:absolute;transform:translateX(-50%);white-space:nowrap}
Timeline .timeline-tick.first {transform:none}
Timeline .timeline-tick.last {transform:translateX(-100%)}
Timeline .timeline-lane {position:relative;height:1rem;background:linear-gradient(to bottom,transparent 7px,var(--border) 7px,var(--border) 9px,transparent 9px)}
Timeline .timeline-dot {position:absolute;top:50%;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;border-radius:100%;background:var(--muted-fg)}
Timeline .timeline-dot.llm {background:var(--warning)}
Timeline .timeline-dot.check {background:var(--success)}
Timeline .timeline-dot.wait {background:var(--warning)}
Timeline .timeline-dot.tool {background:var(--primary)}
Timeline .timeline-dot.bad {background:var(--destructive)}
Timeline .timeline-label {font-size:.75rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
Timeline button.timeline-label.timeline-link {background:none;border:0;padding:0 2px;margin-left:-2px;text-align:left;cursor:pointer;border-radius:var(--radius-sm);border-bottom:2px solid transparent;color:var(--primary);font:inherit}
Timeline .timeline-link:hover {text-decoration:underline;text-underline-offset:3px}
Timeline .timeline-link.active {color:var(--fg);font-weight:650;border-bottom-color:var(--primary)}
Timeline .timeline-dur {font-size:.6875rem;text-align:right;color:var(--muted-fg);font-variant-numeric:tabular-nums;white-space:nowrap}
Timeline .timeline-bar {position:absolute;top:2px;height:12px;border-radius:2px;background:var(--muted-fg)}
Timeline .timeline-bar.llm {background:var(--warning)}
Timeline .timeline-bar.subtask {background:var(--success)}
Timeline .timeline-bar.interaction {background:var(--warning)}
Timeline .timeline-bar.tool {background:var(--primary)}
Timeline .timeline-bar.stream {background:var(--muted-fg)}
Timeline .timeline-bar.failed {background:var(--destructive)}
Timeline .timeline-bar.running {opacity:.7}
Timeline .timeline-caption {margin:.75rem 0 0;color:var(--muted-fg);font-size:.75rem}
@media(max-width:600px) {
  SettingRow {flex-wrap:wrap;gap:.75rem}
  SettingRow .setting-copy {flex-basis:calc(100% - 3rem)}
  SettingRow .setting-control {margin-left:auto}
  Toolbar .toolbar-controls {flex-basis:100%}
  Toolbar .toolbar-actions {margin-left:0}
}

/* SendGrid application patterns: blue selection, compact surfaces, slate type. */
.Sidebar {background:var(--sg-mist);border-radius:4px}
.NavItem {border-radius:3px;color:var(--sg-slate)}
.NavItem.active {background:var(--sg-blue-pale);border-color:var(--sg-blue-pale-border);color:var(--sg-blue)}
.NavItem.active .nav-count {background:var(--sg-blue);color:#fff}
Toolbar {background:var(--sg-mist);border-radius:4px}
SelectionBar {background:var(--sg-blue-pale);border-color:var(--sg-blue-pale-border);color:var(--sg-slate);border-radius:4px}
.StatCard {border-radius:4px;border-top:3px solid var(--sg-blue)}
.StatCard .stat-value {color:var(--sg-slate);font-weight:500}
.StatCard .stat-icon {color:var(--sg-blue)}
SettingRow .setting-icon {color:var(--sg-blue)}
CircularProgress {--circle-track:.375rem}
CircularProgress.sm {--circle-track:.25rem}
CircularProgress.lg {--circle-track:.625rem}
AppShell {height:100dvh;background:var(--sg-mist)}
AppShell>.Sidebar {border:0;border-right:1px solid var(--sg-border);border-radius:0;background:#fff}
AppShell>.shell-main {background:var(--sg-mist)}
CodeBlock {border-radius:4px;background:var(--sg-mist);border-color:var(--sg-border)}
CodeBlock .code-header {background:#fff;font-family:var(--sg-font-body)}
CodeBlock .code-title {color:var(--sg-slate);font-weight:500}
CodeBlock .code-lang {color:var(--sg-slate-light);letter-spacing:.08em}
CodeBlock .code-pre {font-family:var(--sg-font-mono);color:var(--sg-slate);font-size:12.5px}
Timeline .timeline-lane {background:linear-gradient(to bottom,transparent 7px,var(--sg-mist-dark) 7px,var(--sg-mist-dark) 9px,transparent 9px)}
Timeline .timeline-dot {background:var(--sg-steel)}
Timeline .timeline-dot.llm {background:var(--sg-burnt-orange)}
Timeline .timeline-dot.check {background:var(--sg-success)}
Timeline .timeline-dot.wait {background:var(--sg-warning)}
Timeline .timeline-dot.tool {background:var(--sg-crown)}
Timeline .timeline-dot.bad {background:var(--sg-danger)}
Timeline .timeline-label {color:var(--sg-slate)}
Timeline button.timeline-label.timeline-link {color:var(--sg-blue);border-radius:2px}
Timeline .timeline-link.active {color:var(--sg-slate);border-bottom-color:var(--sg-blue)}
Timeline .timeline-dur {color:var(--sg-slate)}
Timeline .timeline-bar.llm {background:var(--sg-burnt-orange)}
Timeline .timeline-bar.subtask {background:var(--sg-success)}
Timeline .timeline-bar.interaction {background:var(--sg-warning)}
Timeline .timeline-bar.tool {background:var(--sg-crown)}
Timeline .timeline-bar.stream {background:var(--sg-steel)}
Timeline .timeline-bar.failed {background:var(--sg-danger)}
Graph {display:block;min-width:0;font-family:var(--sg-font-body)}
Graph .graph-board {position:relative;min-width:100%}
Graph .graph-edges {position:absolute;inset:0;overflow:visible}
Graph .graph-edge {fill:none;stroke:var(--sg-border-strong,#b8c2cc);stroke-width:1.6}
Graph .graph-edge.contains {stroke-dasharray:4 3}
Graph .graph-arrow {fill:var(--sg-steel,#9e9ea6)}
Graph .graph-node {
  position:absolute;display:flex;flex-direction:column;gap:4px;box-sizing:border-box;
  padding:10px 12px;border:1px solid var(--sg-border);border-radius:2px;
  background:#fff;color:var(--sg-slate);text-align:left;font:inherit;
}
Graph .graph-node.interactive {cursor:pointer}
Graph .graph-node.interactive:hover {border-color:var(--sg-blue)}
Graph .graph-node.selected {border-color:var(--sg-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--sg-blue) 25%,transparent)}
Graph .graph-node.active {border-color:var(--sg-warning)}
Graph .graph-node.done, Graph .graph-node.success {border-color:var(--sg-success)}
Graph .graph-node.failed, Graph .graph-node.cancelled, Graph .graph-node.destructive {border-color:var(--sg-danger)}
Graph .graph-node.write {border-color:var(--sg-crown,#294661)}
Graph .graph-node.subtask {padding:8px 10px}
Graph .graph-id {font-size:11px;letter-spacing:.08em;color:var(--sg-slate-light);font-variant-numeric:tabular-nums}
Graph .graph-title {font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
Graph .graph-detail, Graph .graph-meta {font-size:12px;color:var(--sg-slate-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
Graph .graph-empty, Graph .graph-caption {margin:.75rem 0 0;color:var(--sg-slate-light);font-size:12px}

/* ── Diagramme (atom.chart.css) ─────────────────────────────
   SendGrid-Diagrammpalette (Kopfkommentar); :root überschreibt die
   Vorgaben aus atom.chart.css (dort in :where(:root)). */
:root {
  --chart-1: var(--sg-bluebird);
  --chart-2: var(--sg-warning);
  --chart-3: var(--sg-success);
  --chart-4: var(--sg-crown);
  --chart-5: var(--sg-seafoam);
  --chart-6: var(--sg-strawberry);
  --chart-7: var(--sg-cobalt);
  --chart-8: var(--sg-mango);
  --chart-9: var(--sg-danger-deep);
  --chart-text: var(--sg-slate-light);
  --chart-axis: var(--sg-slate-lighter);
  --chart-grid: var(--sg-mist-dark);
  --chart-title: var(--sg-slate);
  --chart-subtitle: var(--sg-slate-light);
  --chart-label: var(--sg-slate);
  --chart-pointer: var(--sg-border-strong);
  --chart-inactive: var(--sg-border);
  --chart-font: var(--sg-font-body);
  --chart-tooltip-fg: var(--sg-slate);
  --chart-tooltip-muted: var(--sg-slate-light);
  --chart-tooltip-border: var(--sg-border);
}

/* ── SCRIPT-FREE OUTPUT & EXTENSIONS ───────────────────────
   Gleicher Block in allen Designsystemen: Accordion, Collapsible und Tabs
   rendern <details> bzw. Radios, damit sie im Export ohne Skript
   funktionieren; dazu die neuen Props von Tabelle, ProgressBar, StatCard.
   ─────────────────────────────────────────────────────────── */
:is(AccordionItem, Collapsible) details > summary { list-style: none; }
:is(AccordionItem, Collapsible) details > summary::-webkit-details-marker { display: none; }
:is(AccordionItem, Collapsible) .trigger { cursor: pointer; }
AccordionItem.disabled .trigger { opacity: 0.5; pointer-events: none; }
AccordionItem details[open] .icon { transform: rotate(180deg); }
Tabs .tab-item { display: inline-flex; }
Tabs .tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
Tabs .tab { cursor: pointer; }
Tabs .tab-input:focus-visible + .tab { outline: 2px solid var(--ring); outline-offset: 2px; }
Tabs .panel { display: none; }
Tabs:has(> .list > .tab-item:nth-child(1) > .tab-input:checked) > .panels > .panel:nth-child(1) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(2) > .tab-input:checked) > .panels > .panel:nth-child(2) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(3) > .tab-input:checked) > .panels > .panel:nth-child(3) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(4) > .tab-input:checked) > .panels > .panel:nth-child(4) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(5) > .tab-input:checked) > .panels > .panel:nth-child(5) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(6) > .tab-input:checked) > .panels > .panel:nth-child(6) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(7) > .tab-input:checked) > .panels > .panel:nth-child(7) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(8) > .tab-input:checked) > .panels > .panel:nth-child(8) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(9) > .tab-input:checked) > .panels > .panel:nth-child(9) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(10) > .tab-input:checked) > .panels > .panel:nth-child(10) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(11) > .tab-input:checked) > .panels > .panel:nth-child(11) { display: block; }
Tabs:has(> .list > .tab-item:nth-child(12) > .tab-input:checked) > .panels > .panel:nth-child(12) { display: block; }
:is(TableHead, TableCell).center { text-align: center; }
:is(TableHead, TableCell):is(.right, .num) { text-align: right; }
:is(TableHead, TableCell).num { font-variant-numeric: tabular-nums; white-space: nowrap; }
DataTable.striped TableBody TableRow:nth-child(even) { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
DataTable.compact :is(TableHead, TableCell) { padding: 0.375rem 0.625rem; }
DataTable.bordered { border: 1px solid var(--border); }
TableRow.group { background-color: var(--muted); }
TableRow.group TableCell { font-weight: 600; }
TableRow.total { border-top: 2px solid var(--fg); }
TableRow.total TableCell { font-weight: 600; }
@media (max-width: 40rem) { DataTable { display: block; overflow-x: auto; } }
ProgressBar { position: relative; }
ProgressBar .target { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--fg); }
ProgressField { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; }
ProgressField .progress-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875em; }
ProgressField .progress-value { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.StatCard .stat-unit, StatCard .stat-unit { margin-left: 0.25rem; font-size: 0.5em; font-weight: 500; color: var(--muted-fg); }
.StatCard .stat-delta, StatCard .stat-delta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; }
.StatCard .stat-delta-label, StatCard .stat-delta-label { color: var(--muted-fg); }
/* ── END SCRIPT-FREE OUTPUT & EXTENSIONS ── */

/* ── DOCUMENT COMPONENTS ─────────────────────────────────────
   Passive Bausteine für Dokumente, Reports, Websites und Slides.
   Maße in em, damit sie mit dem Text des Dokuments (und der Folie)
   skalieren. Farben aus Tokens; `data-tone` setzt --tone. Dieser Block
   ist in allen Designsystemen gleich (atom.gui.css, atom.sendgrid.css,
   atom.atlassian.css) und endet bei END DOCUMENT COMPONENTS.
   ─────────────────────────────────────────────────────────── */
:where(:root) {
  --brand: #2563eb;
  --brand-fg: #ffffff;
  --doc-gap: 1.25em;
  --doc-radius: var(--radius-lg, 0.75rem);
  --bullet-band-0: color-mix(in srgb, var(--muted-fg, #71717a) 38%, var(--card-bg, #fff));
  --bullet-band-1: color-mix(in srgb, var(--muted-fg, #71717a) 24%, var(--card-bg, #fff));
  --bullet-band-2: color-mix(in srgb, var(--muted-fg, #71717a) 14%, var(--card-bg, #fff));
  --bullet-band-3: color-mix(in srgb, var(--muted-fg, #71717a) 7%, var(--card-bg, #fff));
}
[data-tone="brand"] { --tone: var(--brand, #2563eb); }
[data-tone="success"] { --tone: var(--success, #16a34a); }
[data-tone="warning"] { --tone: var(--warning, #d97706); }
[data-tone="destructive"] { --tone: var(--destructive, #dc2626); }
[data-tone="info"] { --tone: var(--info, #0284c7); }
[data-tone="neutral"] { --tone: var(--muted-fg, #71717a); }

.atom-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linked { position: relative; }
.linked .cover-link { color: inherit; text-decoration: none; }
.linked .cover-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.linked .cover-link:focus-visible { outline: none; }
.linked:has(.cover-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.glyph { display: inline-block; line-height: 1; }
/* Große Überschriften: lange Komposita („Geschäftsentwicklung“) trennen statt die Seite zu verbreitern. */
:is(.hero-title, .cover-title, .sh-title, .slide-title, .cta-title, .big-text, .metric-value, .PullQuote blockquote p) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ── Layout ── */
.Grid { container-type: inline-size; width: 100%; min-width: 0; }
.Grid > .grid-inner { display: grid; gap: var(--grid-gap, 1em); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid-inner.cols-1 { --cols: 1; } .grid-inner.cols-2 { --cols: 2; } .grid-inner.cols-3 { --cols: 3; }
.grid-inner.cols-4 { --cols: 4; } .grid-inner.cols-5 { --cols: 5; } .grid-inner.cols-6 { --cols: 6; }
.grid-inner.cols-auto { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 14rem), 100%), 1fr)); }
.grid-inner > * { min-width: 0; }
.GridItem.span-2 { grid-column: span 2; } .GridItem.span-3 { grid-column: span 3; } .GridItem.span-4 { grid-column: span 4; }
.GridItem.span-5 { grid-column: span 5; } .GridItem.span-6 { grid-column: span 6; }
.GridItem.row-span-2 { grid-row: span 2; } .GridItem.row-span-3 { grid-row: span 3; } .GridItem.row-span-4 { grid-row: span 4; }
@container (max-width: 48rem) {
  .grid-inner:is(.cols-3, .cols-4, .cols-5, .cols-6) { --cols: 2; }
  .grid-inner > .GridItem:is(.span-3, .span-4, .span-5, .span-6) { grid-column: span 2; }
}
@container (max-width: 30rem) {
  .grid-inner:not(.cols-auto) { --cols: 1; }
  .grid-inner > .GridItem { grid-column: auto; grid-row: auto; }
}

.BentoGrid { container-type: inline-size; width: 100%; }
.BentoGrid > .bento-inner { display: grid; gap: var(--grid-gap, 1em); grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(var(--bento-row, 11rem), auto); grid-auto-flow: dense; }
.bento-inner.cols-2 { --cols: 2; } .bento-inner.cols-3 { --cols: 3; } .bento-inner.cols-4 { --cols: 4; }
.bento-inner.cols-5 { --cols: 5; } .bento-inner.cols-6 { --cols: 6; }
.BentoItem { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); color: var(--fg); }
.BentoItem.wide { grid-column: span 2; } .BentoItem.tall { grid-row: span 2; } .BentoItem.lg { grid-column: span 2; grid-row: span 2; }
.BentoItem .bento-media { flex: 1 1 auto; min-height: 6em; overflow: hidden; background: var(--muted); }
.BentoItem .bento-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.BentoItem .bento-body { display: flex; flex-direction: column; gap: 0.5em; padding: 1.25em; }
.BentoItem:not(.has-media) .bento-body { flex: 1; justify-content: flex-end; }
.BentoItem .bento-title { margin: 0; font-size: 1.05em; font-weight: 650; line-height: 1.3; }
.BentoItem .bento-text { margin: 0; font-size: 0.9em; line-height: 1.5; color: var(--muted-fg); }
.BentoItem.lg .bento-title { font-size: 1.4em; }
.BentoItem.linked:hover { border-color: color-mix(in srgb, var(--fg) 25%, var(--border)); }
@container (max-width: 48rem) { .bento-inner { --cols: 2 !important; } }
@container (max-width: 30rem) {
  .bento-inner { --cols: 1 !important; grid-auto-rows: auto; }
  .BentoItem:is(.wide, .tall, .lg) { grid-column: auto; grid-row: auto; }
}

.Split { container-type: inline-size; width: 100%; }
.Split > .split-inner { display: grid; grid-template-columns: var(--split-columns, 1fr 1fr); gap: var(--split-gap, 2.5em); }
.Split .split-inner.media-right > .split-media { order: 2; }
.Split .split-media { min-width: 0; }
.Split .split-media:empty { display: none; }
.Split .split-media > img { display: block; width: 100%; height: auto; border-radius: var(--doc-radius); }
.Split .split-body { min-width: 0; }
.Split .split-body > :first-child { margin-top: 0; }
@container (max-width: 40rem) {
  .Split > .split-inner { grid-template-columns: minmax(0, 1fr); gap: 1.25em; }
  .Split .split-inner.media-right > .split-media { order: 0; }
}

.AspectRatio { position: relative; width: 100%; overflow: hidden; border-radius: var(--doc-radius); background: var(--muted); }
.AspectRatio > :is(img, video, iframe, svg, picture) { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.AspectRatio.contain > :is(img, video, svg) { object-fit: contain; }

.Container { width: 100%; margin-inline: auto; max-width: 64rem; }
.Container.narrow { max-width: 42rem; } .Container.wide { max-width: 80rem; } .Container.full { max-width: none; }
.Container.padded { padding-inline: 1.25em; }

/* ── Karten ── */
Card.filled { background: var(--muted); border-color: transparent; box-shadow: none; }
Card.elevated { border-color: transparent; box-shadow: var(--shadow-md); }
Card.ghost { background: transparent; border-color: transparent; box-shadow: none; }
Card.accent { border-top: 3px solid var(--tone, var(--brand)); }
Card > .media > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
Card.linked { transition: box-shadow var(--transition), border-color var(--transition); }
Card.linked:hover { box-shadow: var(--shadow-md); }

.FeatureCard { display: flex; flex-direction: column; gap: 1em; min-width: 0; color: var(--fg); }
.FeatureCard.card { padding: 1.5em; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); }
.FeatureCard.inline { flex-direction: row; align-items: flex-start; }
.FeatureCard.center { align-items: center; text-align: center; }
.FeatureCard .feature-body { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
.FeatureCard .feature-title { margin: 0; font-size: 1.05em; font-weight: 650; line-height: 1.3; }
.FeatureCard .feature-text { margin: 0; font-size: 0.925em; line-height: 1.55; color: var(--muted-fg); }
.FeatureCard .feature-link { margin-top: 0.25em; font-size: 0.9em; font-weight: 600; color: var(--tone, var(--brand)); text-decoration: none; }
.FeatureCard .feature-link:hover { text-decoration: underline; }
.FeatureCard.linked.card:hover { border-color: color-mix(in srgb, var(--tone, var(--brand)) 45%, var(--border)); }

.LinkCard { display: flex; align-items: stretch; gap: 1em; min-width: 0; padding: 1em 1.1em; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); color: var(--fg); text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); }
.LinkCard:hover { border-color: color-mix(in srgb, var(--fg) 25%, var(--border)); box-shadow: var(--shadow-sm); }
.LinkCard .link-icon { flex-shrink: 0; font-size: 1.4em; line-height: 1.2; }
.LinkCard .link-body { display: flex; flex: 1; flex-direction: column; gap: 0.2em; min-width: 0; }
.LinkCard .link-meta { font-size: 0.75em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); }
.LinkCard .link-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.LinkCard .link-text { font-size: 0.875em; line-height: 1.5; color: var(--muted-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.LinkCard .link-thumb { flex: 0 0 7em; margin: -1em -1.1em -1em 0; overflow: hidden; border-radius: 0 var(--doc-radius) var(--doc-radius) 0; background: var(--muted); }
.LinkCard .link-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ProfileCard { display: flex; flex-direction: column; align-items: center; gap: 1em; min-width: 0; padding: 1.5em; text-align: center; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); color: var(--fg); }
.ProfileCard.horizontal { flex-direction: row; align-items: flex-start; text-align: left; }
.ProfileCard .profile-body { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.ProfileCard .profile-name { margin: 0; font-size: 1.05em; font-weight: 650; }
.ProfileCard .profile-role { margin: 0; font-size: 0.875em; color: var(--tone, var(--brand)); font-weight: 500; }
.ProfileCard .profile-bio { margin: 0.25em 0 0; font-size: 0.875em; line-height: 1.55; color: var(--muted-fg); }
.ProfileCard .profile-links { display: flex; flex-wrap: wrap; gap: 0.25em 0.9em; margin: 0.4em 0 0; padding: 0; list-style: none; font-size: 0.85em; }
.ProfileCard.vertical .profile-links { justify-content: center; }
.ProfileCard .profile-links a { color: var(--muted-fg); text-decoration: none; }
.ProfileCard .profile-links a:hover { color: var(--fg); text-decoration: underline; }

.TestimonialCard { display: flex; flex-direction: column; gap: 1em; min-width: 0; margin: 0; padding: 1.5em; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); color: var(--fg); }
.TestimonialCard .testimonial-quote { flex: 1; margin: 0; padding: 0; border: 0; }
.TestimonialCard .testimonial-quote p { margin: 0; font-size: 1.02em; line-height: 1.6; }
.TestimonialCard .testimonial-quote p::before { content: "„"; }
.TestimonialCard .testimonial-quote p::after { content: "“"; }
.TestimonialCard .testimonial-author { display: flex; align-items: center; gap: 0.75em; }
.TestimonialCard .testimonial-person { display: flex; flex-direction: column; font-size: 0.875em; line-height: 1.35; }
.TestimonialCard .testimonial-role { color: var(--muted-fg); }

.PricingCard { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 1.75em; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg); color: var(--fg); }
.PricingCard.highlighted { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.PricingCard .pricing-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }
.PricingCard .pricing-name { margin: 0; font-size: 1.05em; font-weight: 650; }
.PricingCard .pricing-price { display: flex; align-items: baseline; gap: 0.35em; margin: 0; }
.PricingCard .pricing-price strong { font-size: 2.4em; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.PricingCard .pricing-period { color: var(--muted-fg); font-size: 0.9em; }
.PricingCard .pricing-text { margin: 0; font-size: 0.9em; line-height: 1.5; color: var(--muted-fg); }
.PricingCard .Checklist { flex: 1; }
.PricingCard .pricing-cta { justify-content: center; width: 100%; }
Badge.brand { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }

/* ── Kennzahlen ── */
.Delta { display: inline-flex; align-items: baseline; gap: 0.3em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted-fg); }
.Delta.positive { color: var(--success, #16a34a); }
.Delta.negative { color: var(--destructive, #dc2626); }
.Delta .delta-arrow { font-size: 0.7em; }
.Delta.badge { padding: 0.1em 0.55em; border-radius: var(--radius-full, 9999px); background: color-mix(in srgb, currentColor 12%, transparent); font-size: 0.85em; }

.Metric { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; color: var(--fg); }
.Metric.center { align-items: center; text-align: center; }
.Metric .metric-value { display: flex; align-items: baseline; gap: 0.2em; font-size: 2.25em; font-weight: 750; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tone, inherit); overflow-wrap: anywhere; }
.Metric.md .metric-value { font-size: 1.75em; }
.Metric.xl .metric-value { font-size: clamp(2.75em, 8cqi, 5em); }
.Metric .metric-unit { font-size: 0.45em; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.Metric .metric-label { font-size: 0.9em; font-weight: 500; color: var(--muted-fg); }
.Metric .metric-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-size: 0.875em; }
.Metric.center .metric-delta { justify-content: center; }
.Metric .metric-delta-label { color: var(--muted-fg); }
.Metric .metric-text { margin: 0.2em 0 0; font-size: 0.875em; line-height: 1.5; color: var(--muted-fg); }

.StatGroup { width: 100%; overflow: hidden; }
.StatGroup > .statgroup-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr)); gap: 1.25em 0; }
.StatGroup.divided > .statgroup-inner { margin-left: -1px; }
.StatGroup > .statgroup-inner > .Metric { padding: 0.25em 1.5em; }
.StatGroup.divided > .statgroup-inner > .Metric { border-left: 1px solid var(--border); }

.BulletChart { display: grid; grid-template-columns: minmax(6em, 11em) minmax(0, 1fr) auto; align-items: center; gap: 0.5em 1em; font-size: 0.925em; color: var(--fg); }
.BulletChart .bullet-label { display: flex; flex-direction: column; line-height: 1.3; font-weight: 500; }
.BulletChart .bullet-label small { font-weight: 400; color: var(--muted-fg); }
.BulletChart .bullet-track { position: relative; height: 1.4em; border-radius: var(--radius-sm, 0.25rem); background: var(--bullet-band-3); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.BulletChart .bullet-bar { position: absolute; left: 0; top: 30%; bottom: 30%; background: var(--fg); border-radius: 1px; }
.BulletChart .bullet-target { position: absolute; top: 12%; bottom: 12%; width: 3px; margin-left: -1.5px; background: var(--brand); border-radius: 1px; }
.BulletChart .bullet-value { min-width: 4em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.RankingList { display: flex; flex-direction: column; gap: 0.35em; margin: 0; padding: 0; list-style: none; color: var(--fg); }
.RankingList .rank-item { position: relative; display: flex; align-items: center; gap: 0.75em; padding: 0.5em 0.75em; border-radius: var(--radius-md, 0.375rem); isolation: isolate; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.RankingList .rank-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--tone, var(--brand)) 14%, transparent); }
.RankingList .rank-no { flex: 0 0 1.5em; font-weight: 700; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.RankingList .rank-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.RankingList .rank-label a { color: inherit; }
.RankingList .rank-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.StatusIndicator { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.9em; font-weight: 500; color: var(--fg); white-space: nowrap; }
.StatusIndicator .status-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.StatusIndicator.pill { padding: 0.2em 0.7em; border-radius: var(--radius-full, 9999px); background: color-mix(in srgb, var(--tone) 12%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--fg)); }
.StatusIndicator.pill .status-dot { box-shadow: none; }
.StatusIndicator .status-lights { display: inline-flex; gap: 0.2em; padding: 0.2em 0.3em; border-radius: var(--radius-full, 9999px); background: var(--fg); }
.StatusIndicator .light { width: 0.55em; height: 0.55em; border-radius: 50%; background: color-mix(in srgb, var(--card-bg, #fff) 25%, transparent); }
.StatusIndicator .light.on[data-light="destructive"] { background: var(--destructive, #dc2626); }
.StatusIndicator .light.on[data-light="warning"] { background: var(--warning, #d97706); }
.StatusIndicator .light.on[data-light="success"] { background: var(--success, #16a34a); }

.Rating { display: inline-flex; align-items: center; gap: 0.4em; line-height: 1; }
.Rating .rating-stars { letter-spacing: 0.08em; background: linear-gradient(90deg, var(--warning, #f59e0b) var(--rating, 0%), var(--border) var(--rating, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Rating.sm { font-size: 0.85em; } .Rating.lg { font-size: 1.35em; }
.Rating .rating-value { font-size: 0.85em; font-weight: 600; color: var(--muted-fg); font-variant-numeric: tabular-nums; }

/* ── Tabellen ── */
.DataBar { display: inline-flex; align-items: center; gap: 0.6em; width: 100%; min-width: 6em; }
.DataBar .databar-track { flex: 1; height: 0.55em; min-width: 3em; overflow: hidden; border-radius: var(--radius-full, 9999px); background: var(--muted); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.DataBar .databar-fill { display: block; height: 100%; border-radius: inherit; background: var(--tone, var(--brand)); }
.DataBar .databar-value { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }

.ComparisonTable { width: 100%; overflow-x: auto; color: var(--fg); }
.ComparisonTable table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.925em; }
.ComparisonTable caption { caption-side: bottom; padding-top: 0.75em; font-size: 0.875em; color: var(--muted-fg); }
.ComparisonTable th, .ComparisonTable td { padding: 0.75em 1em; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.ComparisonTable thead th { vertical-align: bottom; font-weight: 650; }
.ComparisonTable thead th > * { display: block; }
.ComparisonTable thead th Badge { display: inline-flex; margin-bottom: 0.4em; }
.ComparisonTable th small { display: block; font-weight: 400; color: var(--muted-fg); font-size: 0.85em; }
.ComparisonTable tbody th { text-align: left; font-weight: 500; }
.ComparisonTable .cmp-corner { text-align: left; }
.ComparisonTable .hl { background: color-mix(in srgb, var(--brand) 7%, transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.ComparisonTable thead .hl { border-top: 3px solid var(--brand); border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0; }
.ComparisonTable .cmp-group th { padding-top: 1.25em; text-align: left; font-size: 0.8em; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); }
.ComparisonTable .cmp-yes { color: var(--success, #16a34a); font-weight: 700; }
.ComparisonTable .cmp-no, .ComparisonTable .cmp-none { color: var(--muted-fg); }

.DescriptionList { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(13em, calc((100% - (var(--dl-cols, 1) - 1) * 2em) / var(--dl-cols, 1))), 1fr)); gap: 0 2em; margin: 0; color: var(--fg); }
.DescriptionList .dl-item { display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 0; min-width: 0; }
.DescriptionList.divided .dl-item { border-bottom: 1px solid var(--border); }
.DescriptionList.inline .dl-item { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1em; }
.DescriptionList.inline dd { text-align: right; }
.DescriptionList dt { font-size: 0.85em; color: var(--muted-fg); }
.DescriptionList dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ── Zeit ── */
.EventTimeline { position: relative; margin: 0; padding: 0; list-style: none; color: var(--fg); }
.EventTimeline .event { position: relative; display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 1em; padding-bottom: 1.5em; }
.EventTimeline .event:last-child { padding-bottom: 0; }
.EventTimeline .event::before { content: ""; position: absolute; left: calc(1em - 1px); top: 2em; bottom: 0.25em; width: 2px; background: var(--border); }
.EventTimeline .event:last-child::before { display: none; }
.EventTimeline .event-marker { position: relative; display: grid; place-items: center; width: 2em; height: 2em; }
.EventTimeline .event-marker:not(.has-icon)::after { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid var(--tone, var(--brand)); background: var(--card-bg, #fff); }
.EventTimeline .event-marker.has-icon { border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--brand)) 14%, var(--card-bg, #fff)); color: var(--tone, var(--brand)); font-size: 0.95em; }
.EventTimeline .event-marker Icon, .EventTimeline .event-marker img { width: 1em; height: 1em; }
.EventTimeline .event-body { display: flex; flex-direction: column; gap: 0.25em; padding-top: 0.2em; min-width: 0; }
.EventTimeline .event-date { font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.EventTimeline .event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.EventTimeline .event-title { font-weight: 650; line-height: 1.35; }
.EventTimeline .event-text { margin: 0; font-size: 0.925em; line-height: 1.55; color: var(--muted-fg); }

.Steps { container-type: inline-size; width: 100%; color: var(--fg); }
.Steps .steps-list { display: flex; margin: 0; padding: 0; list-style: none; }
.Steps .step { position: relative; display: flex; gap: 0.75em; min-width: 0; }
.Steps .step-marker { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 2em; height: 2em; border-radius: 50%; border: 2px solid var(--border); background: var(--card-bg, #fff); font-size: 0.9em; font-weight: 700; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.Steps .step.done .step-marker { border-color: var(--brand); background: var(--brand); color: var(--brand-fg); }
.Steps .step.active .step-marker { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.Steps .step-body { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.Steps .step-title { font-weight: 650; line-height: 1.35; }
.Steps .step.todo .step-title { color: var(--muted-fg); font-weight: 550; }
.Steps .step-text { margin: 0; font-size: 0.875em; line-height: 1.5; color: var(--muted-fg); }
.Steps.horizontal .steps-list { gap: 0; }
.Steps.horizontal .step { flex: 1 1 0; flex-direction: column; padding-right: 1em; }
.Steps.horizontal .step::before { content: ""; position: absolute; top: calc(0.9em - 1px); left: 2.2em; right: 0.2em; height: 2px; background: var(--border); }
.Steps.horizontal .step.done::before { background: var(--brand); }
.Steps.horizontal .step:last-child::before { display: none; }
.Steps.vertical .steps-list { flex-direction: column; }
.Steps.vertical .step { padding-bottom: 1.25em; }
.Steps.vertical .step:last-child { padding-bottom: 0; }
.Steps.vertical .step::before { content: ""; position: absolute; left: calc(0.9em - 1px); top: 1.9em; bottom: 0.1em; width: 2px; background: var(--border); }
.Steps.vertical .step.done::before { background: var(--brand); }
.Steps.vertical .step:last-child::before { display: none; }
.Steps.vertical .step-body { padding-top: 0.25em; }
@container (max-width: 36rem) {
  .Steps.horizontal .steps-list { flex-direction: column; }
  .Steps.horizontal .step { flex-direction: row; padding: 0 0 1.25em; }
  .Steps.horizontal .step:last-child { padding-bottom: 0; }
  .Steps.horizontal .step::before { left: calc(0.9em - 1px); top: 1.9em; bottom: 0.1em; right: auto; width: 2px; height: auto; }
  .Steps.horizontal .step-body { padding-top: 0.25em; }
}

.Roadmap { width: 100%; color: var(--fg); }
.Roadmap > .roadmap-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14em, 100%), 1fr)); gap: 1em; }
.Roadmap .roadmap-col { display: flex; flex-direction: column; gap: 0.75em; min-width: 0; padding: 1em; border-radius: var(--doc-radius); background: var(--muted); }
.Roadmap .roadmap-head { padding-bottom: 0.6em; border-bottom: 3px solid var(--tone, var(--brand)); }
.Roadmap .roadmap-head h3 { margin: 0; font-size: 1em; font-weight: 700; }
.Roadmap .roadmap-head p { margin: 0.15em 0 0; font-size: 0.8em; color: var(--muted-fg); }
.Roadmap .roadmap-items { display: flex; flex-direction: column; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.Roadmap .roadmap-item { display: flex; flex-direction: column; gap: 0.35em; padding: 0.8em 0.9em; border: 1px solid var(--border); border-radius: var(--radius-md, 0.375rem); background: var(--card-bg, #fff); break-inside: avoid; }
.Roadmap .roadmap-item strong { font-size: 0.95em; line-height: 1.35; }
.Roadmap .roadmap-item p { margin: 0; font-size: 0.85em; line-height: 1.5; color: var(--muted-fg); }
.Roadmap .roadmap-item .StatusIndicator { font-size: 0.8em; }

.Calendar { container-type: inline-size; width: 100%; color: var(--fg); }
.Calendar .cal-head { margin-bottom: 0.6em; font-size: 1.1em; font-weight: 700; }
.Calendar .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.Calendar .cal-weekday { padding: 0.4em; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg); background: var(--muted); }
.Calendar .cal-day { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; min-height: 5.5em; padding: 0.35em; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.Calendar .cal-day.weekend { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.Calendar .cal-day.outside .cal-date { color: color-mix(in srgb, var(--muted-fg) 50%, transparent); }
.Calendar .cal-date { font-size: 0.8em; font-weight: 600; font-variant-numeric: tabular-nums; }
.Calendar .cal-events { display: flex; flex-direction: column; gap: 0.15em; margin: 0; padding: 0; list-style: none; }
.Calendar .cal-event { overflow: hidden; padding: 0.1em 0.35em; border-radius: var(--radius-sm, 0.25rem); background: color-mix(in srgb, var(--tone, var(--brand)) 14%, transparent); border-left: 3px solid var(--tone, var(--brand)); font-size: 0.72em; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Calendar .cal-more { font-size: 0.7em; color: var(--muted-fg); }
@container (max-width: 30rem) {
  .Calendar .cal-day { min-height: 3em; }
  .Calendar .cal-events { flex-direction: row; flex-wrap: wrap; }
  .Calendar .cal-event { width: 0.45em; height: 0.45em; padding: 0; border: 0; border-radius: 50%; background: var(--tone, var(--brand)); font-size: 0; }
  .Calendar .cal-more { display: none; }
}

.DateBadge { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 3.4em; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md, 0.375rem); background: var(--card-bg, #fff); color: var(--fg); text-align: center; line-height: 1.1; }
.DateBadge .db-month { align-self: stretch; padding: 0.2em 0.4em; background: var(--tone, var(--brand)); color: var(--brand-fg); font-size: 0.7em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.DateBadge .db-day { padding: 0.15em 0.4em 0; font-size: 1.5em; font-weight: 750; font-variant-numeric: tabular-nums; }
.DateBadge .db-weekday { padding-bottom: 0.3em; font-size: 0.7em; color: var(--muted-fg); }
.DateBadge:not(:has(.db-weekday)) .db-day { padding-bottom: 0.2em; }
.DateBadge.sm { font-size: 0.8em; } .DateBadge.lg { font-size: 1.25em; }

.Agenda { display: flex; flex-direction: column; gap: 1.25em; color: var(--fg); }
.Agenda .agenda-day { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1em; break-inside: avoid; }
.Agenda .agenda-day-label { font-weight: 700; }
.Agenda .agenda-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.Agenda .agenda-item { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 1em; padding: 0.65em 0 0.65em 0.75em; border-left: 3px solid var(--tone, var(--border)); }
.Agenda .agenda-item + .agenda-item { border-top: 1px solid var(--border); }
.Agenda .agenda-time { font-size: 0.875em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-fg); }
.Agenda .agenda-body { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.Agenda .agenda-title { font-weight: 650; }
.Agenda .agenda-location { font-size: 0.85em; color: var(--muted-fg); }
.Agenda .agenda-text { margin: 0; font-size: 0.875em; line-height: 1.5; color: var(--muted-fg); }

/* ── Personen ── */
.AvatarGroup { display: inline-flex; align-items: center; }
.AvatarGroup > Avatar, .AvatarGroup > .avatar-more { box-shadow: 0 0 0 2px var(--card-bg, #fff); }
.AvatarGroup > * + * { margin-left: -0.6em; }
.AvatarGroup.sm > * + * { margin-left: -0.45em; }
.AvatarGroup .avatar-more { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.4em; border-radius: 9999px; background: var(--muted); color: var(--muted-fg); font-size: 0.8em; font-weight: 600; }
.AvatarGroup.sm .avatar-more { min-width: 2rem; height: 2rem; font-size: 0.7em; }
.AvatarGroup.lg .avatar-more { min-width: 3rem; height: 3rem; }

.PersonChip { display: inline-flex; align-items: center; gap: 0.45em; max-width: 100%; padding: 0.15em 0.65em 0.15em 0.15em; border-radius: var(--radius-full, 9999px); background: var(--muted); color: var(--fg); text-decoration: none; vertical-align: middle; font-size: 0.9em; line-height: 1.2; }
.PersonChip > Avatar { width: 1.6em; height: 1.6em; font-size: 0.75em; }
.PersonChip .chip-name { font-weight: 550; white-space: nowrap; }
.PersonChip .chip-role { color: var(--muted-fg); white-space: nowrap; }
a.PersonChip:hover { background: color-mix(in srgb, var(--fg) 10%, var(--muted)); }

/* ── Text ── */
.PullQuote { margin: 1.5em 0; padding: 0 0 0 1.25em; border-left: 4px solid var(--tone, var(--brand)); color: var(--fg); }
.PullQuote blockquote { margin: 0; padding: 0; border: 0; }
.PullQuote blockquote p { margin: 0; font-family: var(--flow-head, inherit); font-size: 1.45em; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: inherit; }
.PullQuote.lg blockquote p { font-size: 1.9em; }
.PullQuote.center { padding: 0; border: 0; text-align: center; }
.PullQuote.center blockquote p::before { content: "“"; display: block; font-size: 2.2em; line-height: 0.8; color: var(--tone, var(--brand)); }
.PullQuote figcaption { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.8em; font-size: 0.9em; color: var(--muted-fg); }
.PullQuote.center figcaption { justify-content: center; }
.PullQuote .quote-cite { font-weight: 600; color: var(--fg); }
.PullQuote .quote-cite::before { content: "— "; }
.PullQuote .quote-role::before { content: "· "; }

.Eyebrow { margin: 0; font-size: 0.8em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone, var(--brand)); }
.SectionHeading { display: flex; flex-direction: column; gap: 0.5em; max-width: 46em; margin-bottom: 2em; color: var(--fg); }
.SectionHeading.center { align-items: center; margin-inline: auto; text-align: center; }
.SectionHeading .sh-title { margin: 0; font-family: var(--flow-head, inherit); font-size: 1.9em; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.SectionHeading.sm .sh-title { font-size: 1.35em; }
.SectionHeading.lg .sh-title { font-size: 2.5em; }
.SectionHeading.xl .sh-title { font-size: clamp(2.2em, 6cqi, 3.5em); }
.SectionHeading .sh-subtitle { margin: 0; font-size: 1.1em; line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.SectionHeading .sh-actions { margin-top: 0.75em; }

.Checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(12em, calc((100% - (var(--check-cols, 1) - 1) * 1.5em) / var(--check-cols, 1))), 1fr)); gap: 0.55em 1.5em; margin: 0; padding: 0; list-style: none; color: var(--fg); }
.Checklist .check-item { display: flex; align-items: flex-start; gap: 0.6em; line-height: 1.45; }
.Checklist .check-mark { display: grid; place-items: center; flex-shrink: 0; width: 1.45em; height: 1.45em; margin-top: 0.05em; border-radius: 50%; font-size: 0.8em; font-weight: 800; line-height: 1; color: var(--tone, var(--success, #16a34a)); background: color-mix(in srgb, var(--tone, var(--success, #16a34a)) 14%, transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Checklist .check-item.no .check-mark { color: var(--tone, var(--muted-fg)); background: color-mix(in srgb, var(--tone, var(--muted-fg)) 12%, transparent); }
.Checklist:not([data-tone]) .check-item.no .check-label { color: var(--muted-fg); }
.Checklist .check-item.partial .check-mark { color: var(--warning, #d97706); background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent); }
.Checklist .check-item.info .check-mark { color: var(--info, #0284c7); background: color-mix(in srgb, var(--info, #0284c7) 14%, transparent); font-style: italic; font-family: Georgia, serif; }
.Checklist .check-item:is(.dot, .arrow) .check-mark { background: none; color: var(--tone, var(--brand)); font-size: 1em; }
.Checklist .check-text { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.Checklist .check-desc { font-size: 0.85em; color: var(--muted-fg); }

.ProsCons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr)); gap: 1em; color: var(--fg); }
.ProsCons .pc-col { padding: 1.25em; border-radius: var(--doc-radius); border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border)); background: color-mix(in srgb, var(--tone) 5%, var(--card-bg, #fff)); }
.ProsCons .pc-title { margin: 0 0 0.75em; font-size: 1em; font-weight: 700; color: color-mix(in srgb, var(--tone) 80%, var(--fg)); }

.TableOfContents { color: var(--fg); }
.TableOfContents .toc-title { margin: 0 0 0.6em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }
.TableOfContents .toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc1; }
.TableOfContents .toc-item a { display: flex; align-items: baseline; gap: 0.4em; padding: 0.3em 0; color: inherit; text-decoration: none; }
.TableOfContents .toc-item a:hover .toc-label { color: var(--brand); text-decoration: underline; }
.TableOfContents .toc-item.level-1 { font-weight: 600; counter-increment: toc1; counter-reset: toc2; }
.TableOfContents .toc-item.level-2 { padding-left: 1.25em; font-size: 0.95em; counter-increment: toc2; counter-reset: toc3; }
.TableOfContents .toc-item.level-3 { padding-left: 2.5em; font-size: 0.9em; color: var(--muted-fg); counter-increment: toc3; }
.TableOfContents .toc-item.level-4 { padding-left: 3.75em; font-size: 0.875em; color: var(--muted-fg); }
.TableOfContents.numbered .level-1 .toc-label::before { content: counter(toc1) "  "; }
.TableOfContents.numbered .level-2 .toc-label::before { content: counter(toc1) "." counter(toc2) "  "; }
.TableOfContents.numbered .level-3 .toc-label::before { content: counter(toc1) "." counter(toc2) "." counter(toc3) "  "; }
.TableOfContents .toc-leader { flex: 1; min-width: 1em; border-bottom: 1px dotted color-mix(in srgb, var(--muted-fg) 60%, transparent); }
.TableOfContents .toc-page { font-variant-numeric: tabular-nums; color: var(--muted-fg); }
.TableOfContents .toc-page.auto:empty, .TableOfContents .toc-list:not(:has(.toc-page:not(:empty))) .toc-leader { display: none; }

.Footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--border); font-size: 0.85em; color: var(--muted-fg); }
.Footnotes .fn-title { margin: 0 0 0.5em; font-weight: 700; color: var(--fg); }
.Footnotes .fn-list { margin: 0; padding-left: 1.5em; }
.Footnotes .fn-list li { margin-bottom: 0.35em; line-height: 1.5; }
.Footnotes .fn-list li:target { background: color-mix(in srgb, var(--warning, #f59e0b) 18%, transparent); border-radius: var(--radius-sm, 0.25rem); }
.Footnotes a { color: var(--brand); }
.Footnotes .fn-back { text-decoration: none; }
.FootnoteRef { font-size: 0.7em; line-height: 0; }
.FootnoteRef a { padding: 0 0.1em; color: var(--brand); text-decoration: none; font-weight: 600; }
.FootnoteRef a::before { content: "["; } .FootnoteRef a::after { content: "]"; }

.Highlight { padding: 0.05em 0.2em; border-radius: 0.2em; color: inherit; background: #fde68a; box-decoration-break: clone; -webkit-box-decoration-break: clone; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Highlight[data-color="green"] { background: #bbf7d0; } .Highlight[data-color="blue"] { background: #bfdbfe; }
.Highlight[data-color="pink"] { background: #fbcfe8; } .Highlight[data-color="orange"] { background: #fed7aa; }
.Highlight[data-color="purple"] { background: #e9d5ff; }

.Tag { display: inline-flex; align-items: center; padding: 0.15em 0.6em; border-radius: var(--radius-sm, 0.25rem); background: color-mix(in srgb, var(--tone, var(--muted-fg)) 12%, transparent); color: color-mix(in srgb, var(--tone, var(--muted-fg)) 70%, var(--fg)); font-size: 0.8em; font-weight: 550; line-height: 1.4; text-decoration: none; white-space: nowrap; }
a.Tag:hover { background: color-mix(in srgb, var(--tone, var(--muted-fg)) 22%, transparent); }
.TagList { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; list-style: none; }

/* ── Medien ── */
.IconBadge { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.75em; height: 2.75em; border-radius: var(--radius-md, 0.5rem); background: color-mix(in srgb, var(--tone, var(--brand)) 13%, transparent); color: var(--tone, var(--brand)); font-size: 1em; line-height: 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.IconBadge.solid { background: var(--tone, var(--brand)); color: var(--brand-fg); }
.IconBadge.outline { background: transparent; border: 1.5px solid color-mix(in srgb, var(--tone, var(--brand)) 40%, transparent); }
.IconBadge.circle { border-radius: 50%; } .IconBadge.square { border-radius: 0; }
.IconBadge.sm { width: 2em; height: 2em; font-size: 0.85em; } .IconBadge.lg { width: 3.5em; height: 3.5em; font-size: 1.3em; }
.IconBadge .glyph { font-size: 1.25em; }
.IconBadge Icon, .IconBadge img { width: 1.25em; height: 1.25em; }

.Figure { width: 100%; max-width: var(--figure-width, 100%); margin: 1.5em 0; }
.Figure.center { margin-inline: auto; }
.Figure.left { margin-right: auto; } .Figure.right { margin-left: auto; }
.Figure .figure-media { overflow: hidden; border-radius: var(--radius-md, 0.5rem); }
.Figure .figure-media > img { display: block; width: 100%; height: auto; }
.Figure .figure-media.framed { background: var(--muted); }
.Figure .figure-media.framed > :is(img, svg, video) { height: 100%; object-fit: cover; }
.Figure .figure-media.framed.contain > :is(img, svg, video) { object-fit: contain; }
.Figure figcaption { display: flex; flex-wrap: wrap; gap: 0.25em 0.5em; margin-top: 0.6em; font-size: 0.875em; line-height: 1.5; color: var(--muted-fg); }
.Figure .figure-number { font-weight: 700; color: var(--fg); }
.Figure .SourceNote { flex-basis: 100%; margin: 0; }

.Gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(9em, calc((100% - (var(--gallery-cols, 3) - 1) * var(--gallery-gap, 0.75em)) / var(--gallery-cols, 3))), 1fr)); gap: var(--gallery-gap, 0.75em); }
.Gallery .gallery-item { margin: 0; min-width: 0; break-inside: avoid; }
.Gallery .gallery-item img { display: block; width: 100%; border-radius: var(--radius-md, 0.5rem); background: var(--muted); }
.Gallery.grid .gallery-item img { aspect-ratio: var(--gallery-ratio, 4 / 3); object-fit: cover; }
.Gallery .gallery-item figcaption { margin-top: 0.4em; font-size: 0.8em; line-height: 1.4; color: var(--muted-fg); }
.Gallery.masonry { display: block; columns: var(--gallery-cols, 3) 11em; column-gap: var(--gallery-gap, 0.75em); }
.Gallery.masonry .gallery-item { margin-bottom: var(--gallery-gap, 0.75em); }

.LogoCloud { text-align: center; }
.LogoCloud .logo-title { margin: 0 0 1.25em; font-size: 0.85em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); }
.LogoCloud .logo-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75em 3em; margin: 0; padding: 0; list-style: none; }
.LogoCloud .logo-list img { display: block; height: 2em; width: auto; max-width: 9em; object-fit: contain; }
.LogoCloud.sm .logo-list img { height: 1.5em; } .LogoCloud.lg .logo-list img { height: 2.75em; }
.LogoCloud.grayscale img { filter: grayscale(1); opacity: 0.7; transition: filter var(--transition), opacity var(--transition); }
.LogoCloud.grayscale a:hover img { filter: none; opacity: 1; }

.QrCode { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5em; margin: 0; }
.QrCode .qr-svg { display: block; max-width: 100%; height: auto; }
.QrCode .qr-bg { fill: #fff; }
.QrCode .qr-fg { fill: #000; }
.QrCode figcaption { font-size: 0.85em; color: var(--muted-fg); text-align: center; }
.QrCode .qr-error { font-size: 0.85em; color: var(--destructive, #dc2626); }

.BrowserFrame { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--doc-radius); background: var(--card-bg, #fff); box-shadow: var(--shadow-lg); }
.BrowserFrame .bf-bar { display: flex; align-items: center; gap: 0.75em; padding: 0.55em 0.8em; border-bottom: 1px solid var(--border); background: var(--muted); }
.BrowserFrame .bf-dots { display: inline-flex; gap: 0.35em; }
.BrowserFrame .bf-dots i { width: 0.65em; height: 0.65em; border-radius: 50%; background: color-mix(in srgb, var(--muted-fg) 35%, transparent); }
.BrowserFrame .bf-url { flex: 1; overflow: hidden; padding: 0.2em 0.75em; border-radius: var(--radius-full, 9999px); background: var(--card-bg, #fff); font-size: 0.75em; color: var(--muted-fg); white-space: nowrap; text-overflow: ellipsis; }
.BrowserFrame .bf-screen { overflow: hidden; }
.BrowserFrame .bf-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.DeviceFrame { display: block; width: 100%; max-width: 17em; margin: 0 auto; padding: 0.7em; border-radius: 2.4em; background: #111; box-shadow: var(--shadow-xl), inset 0 0 0 2px #333; }
.DeviceFrame.tablet { max-width: 30em; border-radius: 1.6em; padding: 1em; }
.DeviceFrame .df-screen { overflow: hidden; aspect-ratio: 9 / 19.5; border-radius: 1.8em; background: #fff; }
.DeviceFrame.tablet .df-screen { aspect-ratio: 3 / 4; border-radius: 0.8em; }
.DeviceFrame .df-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── Navigation ── */
.ButtonGroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em; }
.ButtonGroup.center { justify-content: center; } .ButtonGroup.end { justify-content: flex-end; }

.Navbar { container-type: inline-size; position: relative; z-index: 10; width: 100%; border-bottom: 1px solid var(--border); background: var(--card-bg, #fff); color: var(--fg); }
.Navbar.sticky { position: sticky; top: 0; }
.Navbar .nav-inner { display: flex; align-items: center; gap: 2em; max-width: 80rem; margin: 0 auto; padding: 0.8em 1.25em; }
.Navbar .nav-brand { display: inline-flex; align-items: center; gap: 0.6em; color: inherit; font-weight: 750; font-size: 1.1em; text-decoration: none; white-space: nowrap; }
.Navbar .nav-logo { height: 1.8em; width: auto; }
.Navbar .nav-main { flex: 1; }
.Navbar ul { display: flex; gap: 0.25em 1.5em; margin: 0; padding: 0; list-style: none; }
.Navbar .nav-links a, .Navbar .nav-panel-links a { color: var(--muted-fg); font-size: 0.95em; font-weight: 500; text-decoration: none; }
.Navbar .nav-links a:hover, .Navbar .nav-panel-links a:hover, .Navbar a.active { color: var(--fg); }
.Navbar .nav-menu { display: none; margin-left: auto; }
.Navbar .nav-menu > summary { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: var(--radius-md, 0.375rem); cursor: pointer; list-style: none; }
.Navbar .nav-menu > summary::-webkit-details-marker { display: none; }
.Navbar .nav-burger, .Navbar .nav-burger::before, .Navbar .nav-burger::after { display: block; width: 1.2em; height: 2px; border-radius: 1px; background: currentColor; }
.Navbar .nav-burger { position: relative; }
.Navbar .nav-burger::before, .Navbar .nav-burger::after { content: ""; position: absolute; left: 0; }
.Navbar .nav-burger::before { top: -0.4em; } .Navbar .nav-burger::after { top: 0.4em; }
.Navbar .nav-menu[open] .nav-burger { background: transparent; }
.Navbar .nav-menu[open] .nav-burger::before { top: 0; transform: rotate(45deg); }
.Navbar .nav-menu[open] .nav-burger::after { top: 0; transform: rotate(-45deg); }
.Navbar .nav-panel { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 1em; padding: 1em 1.25em 1.25em; border-bottom: 1px solid var(--border); background: var(--card-bg, #fff); box-shadow: var(--shadow-md); }
.Navbar .nav-menu[open] .nav-panel { display: flex; }
.Navbar .nav-panel-links { flex-direction: column; }
.Navbar .nav-panel-links a { display: block; padding: 0.4em 0; }
@container (max-width: 48rem) {
  .Navbar .nav-main, .Navbar .nav-actions { display: none; }
  .Navbar .nav-menu { display: block; }
}

.Footer { container-type: inline-size; width: 100%; padding: 3em 1.25em 1.5em; border-top: 1px solid var(--border); background: var(--muted); color: var(--fg); font-size: 0.925em; }
.Footer .footer-top { display: grid; grid-template-columns: minmax(12em, 1.2fr) 2fr; gap: 2.5em; max-width: 80rem; margin: 0 auto; }
.Footer .footer-top:not(:has(.footer-brand)) { grid-template-columns: 1fr; }
.Footer .footer-brand { display: flex; flex-direction: column; gap: 0.6em; }
.Footer .footer-brand p { margin: 0; line-height: 1.55; color: var(--muted-fg); max-width: 24em; }
.Footer .footer-logo { height: 2em; width: auto; align-self: flex-start; }
.Footer .footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: 1.75em; }
.Footer .footer-col-title { margin: 0 0 0.75em; font-size: 0.85em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.Footer ul { display: flex; flex-direction: column; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.Footer a { color: var(--muted-fg); text-decoration: none; }
.Footer a:hover { color: var(--fg); text-decoration: underline; }
.Footer .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; max-width: 80rem; margin: 2.5em auto 0; padding-top: 1.25em; border-top: 1px solid var(--border); font-size: 0.85em; color: var(--muted-fg); }
.Footer .footer-legal { margin: 0; }
@container (max-width: 40rem) { .Footer .footer-top { grid-template-columns: 1fr; } }

/* ── Aufklappen ── */
.FAQ { color: var(--fg); }
.FAQ .faq-title { margin: 0 0 1em; font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; }
.FAQ .faq-list { border-top: 1px solid var(--border); }
.FAQ .faq-item { border-bottom: 1px solid var(--border); }
.FAQ .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.05em 0; font-weight: 600; cursor: pointer; list-style: none; }
.FAQ .faq-question::-webkit-details-marker { display: none; }
.FAQ .faq-question:hover { color: var(--brand); }
.FAQ .faq-icon { position: relative; flex-shrink: 0; width: 0.9em; height: 0.9em; }
.FAQ .faq-icon::before, .FAQ .faq-icon::after { content: ""; position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.2s ease; }
.FAQ .faq-icon::after { transform: rotate(90deg); }
.FAQ .faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.FAQ .faq-answer { padding: 0 2em 1.1em 0; line-height: 1.6; color: var(--muted-fg); }
.FAQ .faq-answer p { margin: 0 0 0.6em; }

/* ── Website-Abschnitte ── */
.Hero { container-type: inline-size; position: relative; width: 100%; overflow: hidden; color: var(--fg); }
.Hero .hero-inner { display: grid; gap: 3em; align-items: center; max-width: 80rem; margin: 0 auto; padding: 4em 1.25em; }
.Hero.lg .hero-inner { padding-block: 6em; } .Hero.sm .hero-inner { padding-block: 2.5em; }
.Hero.split .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.Hero.centered .hero-inner { justify-items: center; text-align: center; }
.Hero.centered .hero-body { align-items: center; max-width: 48em; }
.Hero .hero-body { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.Hero .hero-title { margin: 0; font-family: var(--flow-head, inherit); font-size: clamp(2.2em, 5.5cqi, 3.8em); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.Hero .hero-subtitle { margin: 0; max-width: 38em; font-size: 1.2em; line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.Hero .hero-actions { margin-top: 0.75em; }
.Hero .hero-media > img { display: block; width: 100%; height: auto; border-radius: var(--doc-radius); box-shadow: var(--shadow-xl); }
.Hero.image { background: #0b1220 var(--hero-image) center / cover no-repeat; color: #fff; }
.Hero.image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.25)); }
.Hero.image .hero-inner { position: relative; }
.Hero.image .hero-subtitle { color: rgb(255 255 255 / 0.85); }
.Hero.image .Eyebrow { color: #fff; opacity: 0.85; }
.Hero[data-tone]:not(.image) { background: color-mix(in srgb, var(--tone) 7%, var(--card-bg, #fff)); }
@container (max-width: 48rem) {
  .Hero.split .hero-inner { grid-template-columns: 1fr; }
  .Hero .hero-inner, .Hero.lg .hero-inner { padding-block: 3em; }
}

.FeatureGrid { color: var(--fg); }
.PricingTable .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr)); gap: 1.25em; align-items: stretch; }
.Testimonials { color: var(--fg); }

.CallToAction { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5em 2.5em; padding: clamp(1.75em, 5vw, 2.75em) clamp(1.25em, 5vw, 2.5em); border-radius: var(--doc-radius); color: var(--fg); }
.CallToAction.center { flex-direction: column; text-align: center; }
.CallToAction .cta-body { display: flex; flex-direction: column; gap: 0.6em; max-width: 42em; }
.CallToAction .cta-title { margin: 0; font-family: var(--flow-head, inherit); font-size: 1.75em; font-weight: 750; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.CallToAction .cta-subtitle { margin: 0; font-size: 1.05em; line-height: 1.55; opacity: 0.85; }
.CallToAction.band { background: var(--tone, var(--brand)); color: var(--brand-fg); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.CallToAction.band .Eyebrow { color: inherit; opacity: 0.8; }
.CallToAction.band .ActionButton.primary { background: var(--brand-fg); border-color: var(--brand-fg); color: var(--tone, var(--brand)); }
.CallToAction.band .ActionButton:is(.outline, .secondary, .ghost) { background: transparent; border-color: color-mix(in srgb, var(--brand-fg) 55%, transparent); color: var(--brand-fg); }
.CallToAction.soft { background: color-mix(in srgb, var(--tone, var(--brand)) 9%, var(--card-bg, #fff)); }
.CallToAction.card { border: 1px solid var(--border); background: var(--card-bg, #fff); box-shadow: var(--shadow-md); }
.CallToAction:not(.center) .cta-body { flex: 1 1 22em; }

/* ── Report ── */
.CoverPage { container-type: inline-size; display: flex; flex-direction: column; gap: 2.5em; min-height: 42em; padding: clamp(1.25em, 6vw, 3em); border-radius: var(--doc-radius); background: var(--card-bg, #fff); color: var(--fg); }
.CoverPage.band { border-top: 0.75em solid var(--tone, var(--brand)); border-radius: 0; }
.CoverPage.dark { background: #0f172a; color: #f8fafc; }
.CoverPage.dark .cover-subtitle, .CoverPage.dark .DescriptionList dt { color: #cbd5e1; }
.CoverPage .cover-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; }
.CoverPage .cover-org { display: flex; align-items: center; gap: 0.75em; font-weight: 700; }
.CoverPage .cover-logo { height: 2.5em; width: auto; }
.CoverPage .cover-main { display: flex; flex-direction: column; gap: 0.9em; margin-top: auto; max-width: 42em; }
.CoverPage .cover-title { margin: 0; font-family: var(--flow-head, inherit); font-size: clamp(2.2em, 6cqi, 3.4em); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.CoverPage .cover-subtitle { margin: 0; font-size: 1.25em; line-height: 1.5; color: var(--muted-fg); }
.CoverPage .cover-media > img { display: block; width: 100%; max-height: 22em; object-fit: cover; border-radius: var(--doc-radius); }
.CoverPage .cover-meta { margin-top: auto; padding-top: 1.25em; border-top: 2px solid var(--tone, var(--brand)); }

.SummaryBox { display: flex; flex-direction: column; gap: 1.25em; padding: 1.75em; border-radius: var(--doc-radius); border: 1px solid color-mix(in srgb, var(--tone, var(--brand)) 25%, var(--border)); border-left: 5px solid var(--tone, var(--brand)); background: color-mix(in srgb, var(--tone, var(--brand)) 5%, var(--card-bg, #fff)); color: var(--fg); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.SummaryBox .summary-title { margin: 0; font-size: 0.85em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone, var(--brand)); }
.SummaryBox .StatGroup { padding: 0.25em 0; }
.SummaryBox .StatGroup .Metric { padding-left: 0; padding-right: 1.5em; }
.SummaryBox .StatGroup.divided .Metric + .Metric { padding-left: 1.5em; }

.SourceNote { margin: 0.5em 0 0; font-size: 0.8em; line-height: 1.5; color: var(--muted-fg); }
.SourceNote > span + span::before { content: " · "; }
.SourceNote a { color: inherit; }

.SignatureBlock { display: flex; flex-direction: column; gap: 2.5em; margin: 2em 0; color: var(--fg); break-inside: avoid; }
.SignatureBlock .sig-place { margin: 0; }
.SignatureBlock .sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14em, 100%), 1fr)); gap: 2.5em; }
.SignatureBlock .sig-item { display: flex; flex-direction: column; gap: 0.2em; }
.SignatureBlock .sig-blank { max-width: 18em; }
.SignatureBlock .sig-line { height: 2.75em; border-bottom: 1px solid var(--fg); margin-bottom: 0.35em; }
.SignatureBlock .sig-name { font-weight: 600; }
.SignatureBlock .sig-role { font-size: 0.85em; color: var(--muted-fg); }

.Stamp { display: inline-block; padding: 0.3em 0.8em; border: 3px double var(--tone, var(--destructive, #dc2626)); border-radius: var(--radius-md, 0.375rem); color: var(--tone, var(--destructive, #dc2626)); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(var(--stamp-rotate, -8deg)); opacity: 0.85; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Stamp.watermark { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow: hidden; white-space: nowrap; padding: 0; border: 0; font-size: clamp(2.5em, 11vw, 8em); opacity: 0.08; pointer-events: none; transform: none; }
.Stamp.watermark::before { content: none; }

/* ── Slides ── */
.Slide { container-type: inline-size; position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-md, 0.5rem); background: var(--card-bg, #fff); color: var(--fg); box-shadow: 0 0 0 1px var(--border); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.Slide .slide-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3cqi; padding: 5.5cqi 6cqi 4cqi; font-size: 2.1cqi; line-height: 1.45; }
.Slide .slide-head { display: flex; flex-direction: column; gap: 0.6em; }
.Slide .slide-title { margin: 0; font-family: var(--flow-head, inherit); font-size: 2.2em; font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.Slide .slide-subtitle { margin: 0; font-size: 1.15em; color: var(--muted-fg); }
.Slide .slide-content { display: flex; flex: 1; gap: 4cqi; min-height: 0; }
.Slide .slide-body { flex: 1; min-width: 0; min-height: 0; }
.Slide .slide-body > :first-child { margin-top: 0; }
.Slide .slide-media { flex: 1; min-width: 0; }
.Slide .slide-media > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md, 0.5rem); }
.Slide .slide-foot { display: flex; align-items: center; gap: 1em; font-size: 0.7em; color: var(--muted-fg); }
.Slide .slide-footer-text { flex: 1; }
.Slide .slide-logo { height: 1.8em; width: auto; }
.Slide .slide-number { font-variant-numeric: tabular-nums; }
.Slide.title .slide-inner { justify-content: center; }
.Slide.title .slide-head { max-width: 80%; }
.Slide.title .slide-title { font-size: 3.4em; }
.Slide.title .slide-content { flex: 0 0 auto; }
.Slide.section { background: var(--brand); color: var(--brand-fg); }
.Slide.section .slide-inner { justify-content: center; }
.Slide.section .slide-title { font-size: 3em; }
.Slide.section :is(.slide-subtitle, .slide-foot, .Eyebrow) { color: inherit; opacity: 0.8; }
.Slide.center .slide-inner { align-items: center; justify-content: center; text-align: center; }
.Slide.center .slide-content { flex: 0 0 auto; align-self: stretch; justify-content: center; }
.Slide.split .slide-content > * { flex: 1 1 50%; }
.Slide.dark { background: #0f172a; color: #f1f5f9; }
.Slide.dark :is(.slide-subtitle, .slide-foot) { color: #94a3b8; }
.Slide.brand { background: var(--brand); color: var(--brand-fg); }
.Slide.brand :is(.slide-subtitle, .slide-foot, .Eyebrow) { color: inherit; opacity: 0.8; }
.Slide.has-image { background: #0b1220 var(--slide-image) center / cover no-repeat; color: #fff; }
.Slide.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.65)); }
.Slide.has-image :is(.slide-subtitle, .slide-foot) { color: rgb(255 255 255 / 0.8); }

.BigStatement { display: flex; flex-direction: column; gap: 1em; padding: 2em 0; color: var(--fg); }
.BigStatement.center { align-items: center; text-align: center; }
.BigStatement .big-text { margin: 0; max-width: 30em; font-family: var(--flow-head, inherit); font-size: clamp(1.6em, 4.5cqi, 2.8em); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.BigStatement[data-tone] .big-text { color: var(--tone); }

/* ── Druck ── */
@media print {
  :is(Card, .FeatureCard, .LinkCard, .ProfileCard, .TestimonialCard, .PricingCard, .BentoItem, .Metric, .StatGroup, .BulletChart,
      .EventTimeline .event, .Steps .step, .Roadmap .roadmap-item, .Agenda .agenda-day, .DescriptionList .dl-item, .Figure, .Gallery .gallery-item,
      .SummaryBox, .CallToAction, .PullQuote, .ProsCons .pc-col, .SignatureBlock, .FAQ .faq-item, TableRow, .ComparisonTable tr, .QrCode) { break-inside: avoid; }
  :is(.SectionHeading, .EventTimeline .event-head, .Figure figcaption) { break-after: avoid; }
  .CoverPage { min-height: calc(100vh - 2cm); border-radius: 0; break-after: page; }
  .Slide { break-inside: avoid; break-after: page; box-shadow: none; border-radius: 0; }
  .Stamp.watermark { position: fixed; }
  .Navbar.sticky { position: static; }
  .Navbar .nav-menu { display: none !important; }
  .linked .cover-link::after { position: static; }
  .LogoCloud.grayscale img { opacity: 1; }
}
/* ── END DOCUMENT COMPONENTS ── */