/* Gemeinsame Oberflächentiefe. Ausschließlich Bildschirmdarstellung;
   keine Änderungen an Druckvorlagen oder gerenderten Fotoprodukten. */
@media screen {
  html[data-fw-depth] {
    --fw-depth-quiet: 0 1px 2px rgb(19 48 61 / 8%), 0 3px 8px rgb(19 48 61 / 5%);
    --fw-depth-surface: 0 2px 4px rgb(19 48 61 / 9%), 0 8px 20px rgb(19 48 61 / 9%);
    --fw-depth-button: 0 1px 2px rgb(19 48 61 / 15%), 0 3px 7px rgb(19 48 61 / 11%);
    --fw-depth-button-hover: 0 2px 3px rgb(19 48 61 / 16%), 0 5px 11px rgb(19 48 61 / 14%);
    --fw-depth-dialog: 0 4px 10px rgb(19 48 61 / 15%), 0 18px 48px rgb(19 48 61 / 21%);
  }

  html[data-fw-depth] body {
    text-shadow: 0 .3px .5px rgb(19 48 61 / 10%);
  }

  html[data-fw-depth] body :is(h1, h2, h3, h4) {
    text-shadow: 0 .5px .8px rgb(19 48 61 / 14%);
  }

  /* Eine klare Außenkante, innen ruhigere Abstufungen. */
  html[data-fw-depth] body :is(
    .panel, .card, .stat, .metric, .order-card, .today-banner, .cost-result,
    .fw-card, .fw-metric, .fw-document-direction, .fw-workshop-checkout,
    .fg-card, .fg-order, .fg-photo, .fg-order-details, .fp-discovery,
    .fc-new-card, .fc-project, .fc-proof-card,
    .login-box, .access-shell, .guest-login
  ) {
    box-shadow: var(--fw-depth-surface);
  }

  html[data-fw-depth] body :is(
    .document-item, .appointment-card, .portal-status-box, .portal-security,
    .notice, .fw-note, .fw-message, .fg-note, .fc-muted-box, .fc-production
  ) {
    box-shadow: var(--fw-depth-quiet);
  }

  html[data-fw-depth] body :is(.sidebar, .topbar, .guest-header, .fc-header, .fg-window-header) {
    box-shadow: 0 2px 8px rgb(19 48 61 / 9%);
  }

  /* Auch auf schmalen Geräten alle Zugangsschaltflächen erreichbar halten. */
  html[data-fw-depth] body .portal-account-actions {
    min-width: 0;
    max-width: 100%;
  }

  /* Der Kennwort-Schalter sitzt auf hellem Grund, anders als „Abmelden“. */
  html[data-fw-depth] body .access-form .portal-logout {
    color: #263f4d;
    background: #f1f6f8;
    border-color: #c5d2d8;
    margin-top: 6px;
  }

  html[data-fw-depth] body :is(button, .btn, .fw-btn, .fg-button, [role="button"]) {
    box-shadow: var(--fw-depth-button);
    text-shadow: 0 .3px .5px rgb(19 48 61 / 10%);
  }

  /* Navigation bleibt als zusammengehörige Liste lesbar. */
  html[data-fw-depth] body .nav button {
    box-shadow: var(--fw-depth-quiet);
  }

  html[data-fw-depth] body .nav button.active {
    box-shadow: inset 4px 0 var(--orange, #da641c), var(--fw-depth-button);
  }

  html[data-fw-depth] body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    box-shadow: inset 0 1px 2px rgb(19 48 61 / 5%), 0 1px 3px rgb(19 48 61 / 9%);
    text-shadow: none;
  }

  html[data-fw-depth] body :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--orange, #c45b25);
    outline-offset: 2px;
  }

  html[data-fw-depth] body :is(dialog, .modal, .fw-gallery-popup, .martin-panel):not(.fc-studio):not(.fg-gallery-window) {
    box-shadow: var(--fw-depth-dialog);
  }

  html[data-fw-depth] body :is(button:disabled, [aria-disabled="true"]) {
    box-shadow: 0 1px 2px rgb(19 48 61 / 6%);
  }

  /* Aktive Produkt-/Seitenwahl und reine Farbmuster nicht überdecken. */
  html[data-fw-depth] body :is(button[aria-pressed="true"], .fc-model-tile:has(input:checked)) {
    box-shadow: inset 0 0 0 1px currentColor, var(--fw-depth-quiet);
  }

  html[data-fw-depth] body :is(.fc-swatches, .fc-paper-swatch, .fc-type-sample) {
    text-shadow: none;
  }

  /* Druckseiten-Vorschau muss auch am Bildschirm unverfälscht bleiben. */
  html[data-fw-depth] body :is(.qr-card, .qr-card *, .fc-canvas-wrap, .fc-canvas-wrap *, .fc-font-list *, .fc-type-sample, .fc-type-sample + span) {
    text-shadow: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    html[data-fw-depth] body :is(button, .btn, .fw-btn, .fg-button, [role="button"]):not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):hover {
      box-shadow: var(--fw-depth-button-hover);
    }
    html[data-fw-depth] body .nav button.active:hover {
      box-shadow: inset 4px 0 var(--orange, #da641c), var(--fw-depth-button-hover);
    }
  }
}