/* Lade zuerst EZ_Design_Tokens.css.
 * Alle Regeln sind auf .ez-ui begrenzt. Vorhandenes HTML bleibt außerhalb
 * dieses Bereichs unverändert. Komponenten werden ausdrücklich per Klasse aktiviert.
 * Breakpoints: 40rem (Tablet), 64rem (Desktop).
 * Lokale Schriften: siehe EINBINDUNG.md. Keine externen Font-Anfragen.
 */
.ez-ui {
  font-family: var(--font-body);
  font-size: var(--ez-text-base);
  line-height: var(--ez-leading-body);
  color: var(--ez-text);
  overflow-wrap: anywhere;
}
.ez-ui, .ez-ui *, .ez-ui *::before, .ez-ui *::after { box-sizing: border-box; }
body.ez-ui { margin: 0; }
.ez-ui.ez-page { background: var(--ez-page-background); }
.ez-ui .ez-container { width: 100%; max-width: var(--ez-content-width); margin-inline: auto; padding-inline: var(--ez-page-gutter); }
.ez-ui .ez-section { padding-block: var(--ez-section-space); }
.ez-ui .ez-section--white { background: var(--ez-surface); }
.ez-ui .ez-section--navy { background: var(--ez-navy); color: var(--ez-white); --ez-focus: var(--ez-white); --ez-text-muted: #D5DCE4; }
.ez-ui .ez-stack > * { margin-block: 0; }
.ez-ui .ez-stack > * + * { margin-block-start: var(--ez-space-5); }
.ez-ui .ez-reading { max-width: var(--ez-reading-width); }
.ez-ui .ez-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ez-space-5); }
.ez-ui .ez-grid > * { min-width: 0; }
.ez-ui .ez-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ez-space-3); }
.ez-ui .ez-h1, .ez-ui .ez-h2, .ez-ui .ez-h3 {
  font-family: var(--font-heading); font-weight: var(--ez-weight-semibold);
  line-height: var(--ez-leading-heading); letter-spacing: var(--ez-tracking-heading);
  margin-block: 0 var(--ez-space-4); text-wrap: balance;
}
.ez-ui .ez-h1 { font-size: var(--ez-heading-1); }
.ez-ui .ez-h2 { font-size: var(--ez-heading-2); }
.ez-ui .ez-h3 { font-size: var(--ez-heading-3); }
.ez-ui .ez-text { margin-block: 0 var(--ez-space-4); }
.ez-ui .ez-lead { font-size: var(--ez-text-lg); max-width: var(--ez-reading-width); margin-block: 0 var(--ez-space-5); }
.ez-ui .ez-muted { color: var(--ez-text-muted); }
.ez-ui .ez-small { font-size: var(--ez-text-sm); }
.ez-ui .ez-eyebrow { font-size: var(--ez-text-sm); font-weight: var(--ez-weight-semibold); letter-spacing: .09em; text-transform: uppercase; margin-block: 0 var(--ez-space-4); }
.ez-ui .ez-link { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ez-ui .ez-link:hover { text-decoration-thickness: 2px; }
.ez-ui .ez-link:active { text-decoration-style: double; }
.ez-ui .ez-link:focus-visible, .ez-ui .ez-button:focus-visible,
.ez-ui .ez-input:focus-visible, .ez-ui .ez-select:focus-visible,
.ez-ui .ez-textarea:focus-visible, .ez-ui .ez-checkbox:focus-visible {
  outline: var(--ez-focus-width) solid var(--ez-focus);
  outline-offset: var(--ez-focus-offset);
}
.ez-ui .ez-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ez-space-2);
  min-height: 44px; max-width: 100%; padding: .75rem 1.25rem;
  border: 1px solid var(--ez-action); border-radius: var(--radius-control);
  font: inherit; font-weight: var(--ez-weight-semibold); line-height: 1.35;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  background: var(--ez-action); color: var(--ez-action-text);
  transition: background-color var(--ez-transition-duration) var(--ez-transition-easing), box-shadow var(--ez-transition-duration) var(--ez-transition-easing);
}
.ez-ui .ez-button:hover:not(:disabled) { background: var(--ez-action-hover); }
.ez-ui .ez-button:active:not(:disabled) { background: var(--ez-action-active); }
.ez-ui .ez-button--secondary { background: var(--ez-white); color: var(--ez-navy); border-color: var(--ez-navy); }
.ez-ui .ez-button--secondary:hover:not(:disabled) { background: var(--ez-soft-hover); }
.ez-ui .ez-button--secondary:active:not(:disabled) { background: var(--ez-soft-active); }
.ez-ui .ez-button--product { --ez-action: var(--smart-archive-action); --ez-action-hover: var(--smart-archive-action-hover); --ez-action-active: var(--smart-archive-action-active); }
.ez-ui .ez-button:disabled { background: var(--ez-disabled-background); color: var(--ez-disabled-text); border-color: var(--ez-disabled-text); cursor: not-allowed; box-shadow: none; }
.ez-ui .ez-card { background: var(--ez-surface); color: var(--ez-navy); padding: var(--ez-space-5); border: var(--ez-border-width) solid var(--ez-border-subtle); border-radius: var(--ez-radius-card); box-shadow: var(--ez-shadow-card); --ez-focus: var(--ez-navy); --ez-text-muted: #5C6673; }
.ez-ui .ez-card--accent { border-top: 3px solid var(--ez-gold); }
.ez-ui .ez-card--product { border-top: 3px solid var(--smart-archive-blue); }
.ez-ui .ez-badge { display: inline-block; border-radius: var(--ez-radius-pill); background: var(--smart-archive-soft-blue); color: var(--ez-navy); padding: .25rem .75rem; font-size: var(--ez-text-sm); font-weight: var(--ez-weight-medium); }
.ez-ui .ez-form { width: 100%; max-width: var(--ez-form-width); }
.ez-ui .ez-field { display: grid; gap: var(--ez-space-2); margin-block-end: var(--ez-space-5); }
.ez-ui .ez-label { font-weight: var(--ez-weight-semibold); }
.ez-ui .ez-input, .ez-ui .ez-select, .ez-ui .ez-textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: .75rem;
  border: 1px solid var(--ez-border-control); border-radius: var(--radius-control);
  font: inherit; color: var(--ez-navy); background: var(--ez-white); --ez-focus: var(--ez-navy);
}
.ez-ui .ez-textarea { min-height: 9rem; resize: vertical; }
.ez-ui .ez-input::placeholder, .ez-ui .ez-textarea::placeholder { color: var(--ez-text-muted); opacity: 1; }
.ez-ui :is(.ez-input, .ez-select, .ez-textarea):hover:not(:disabled) { border-color: var(--ez-navy); }
.ez-ui :is(.ez-input, .ez-select, .ez-textarea)[aria-invalid="true"] { border-color: var(--ez-error); border-width: 2px; }
.ez-ui :is(.ez-input, .ez-select, .ez-textarea):disabled { background: var(--ez-disabled-background); color: var(--ez-disabled-text); cursor: not-allowed; }
.ez-ui .ez-hint { color: var(--ez-text-muted); font-size: var(--ez-text-sm); margin: 0; }
.ez-ui .ez-error { color: var(--ez-error); font-size: var(--ez-text-sm); margin: 0; }
.ez-ui .ez-success { color: var(--ez-success); font-size: var(--ez-text-sm); margin: 0; }
.ez-ui .ez-check { display: flex; align-items: flex-start; gap: var(--ez-space-3); }
.ez-ui .ez-checkbox { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--ez-navy); }
.ez-ui .ez-logo { display: block; width: min(300px, 100%); height: auto; }
.ez-ui .ez-logo > svg { display: block; width: 100%; height: auto; }
@media (min-width: 40rem) {
  .ez-ui .ez-grid--2, .ez-ui .ez-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ez-ui .ez-card { padding: var(--ez-space-6); }
}
@media (min-width: 64rem) { .ez-ui .ez-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ez-ui { --ez-transition-duration: 0ms; } }
@media (forced-colors: active) { .ez-ui .ez-button { border: 1px solid ButtonText; } }
