@layer components {
  .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:9998; }
  .overlay.show{ display:block; }

  .modal{ position:fixed; inset:0; display:none; z-index:9999; place-items:center; padding:20px; }
  .modal.show{ display:grid; }
  .dialog{
    width:min(720px,96vw); background:#fff; border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow-3); padding:16px; overflow:hidden;
  }
  .dialog__head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
  .dialog__title{ font-size:18px; font-weight:600; }
  .dialog__body{ padding:16px; }
  .dialog__actions{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }

  .verify-reminder{
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    display:flex; gap:10px; align-items:center; z-index:9997; background:#fff6cc;
    border:1px solid #ffe08a; color:#6b5500; padding:8px 12px; border-radius:10px; box-shadow:var(--shadow-2);
  }

  .toast{
    position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:10000;
    background:#111; color:#fff; border-radius:12px; border:1px solid rgba(0,0,0,.2);
    padding:10px 14px; font-size:14px; box-shadow:var(--shadow-2); display:none; pointer-events:none;
  }
  .toast.show{ display:block; }

  /* Profilbild-Cropper nur sichtbar wenn geöffnet */
  #picCropOverlay{ display:none !important; }
  #picCropOverlay[aria-hidden="false"]{ display:flex !important; }
}