/* Einladung: Mitteilungen nach Anmeldung / Abo (Web-Push-Berechtigung) */

.pwa-mitteilungen-einladung {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  pointer-events: none;
}

.pwa-mitteilungen-einladung[hidden] {
  display: none !important;
}

.pwa-mitteilungen-einladung--sichtbar {
  pointer-events: auto;
}

.pwa-mitteilungen-einladung-hintergrund {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.pwa-mitteilungen-einladung-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 20px 18px max(18px, env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 16px 16px;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.pwa-mitteilungen-einladung--sichtbar .pwa-mitteilungen-einladung-panel {
  transform: translateY(0);
}

.pwa-mitteilungen-einladung-symbol {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

.pwa-mitteilungen-einladung-titel {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.pwa-mitteilungen-einladung-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.pwa-mitteilungen-einladung-zeile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-mitteilungen-einladung-knopf {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.pwa-mitteilungen-einladung-knopf--primaer {
  border-color: rgba(124, 58, 237, 0.65);
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
}

.pwa-mitteilungen-einladung-knopf:active {
  transform: scale(0.98);
}

.pwa-mitteilungen-einladung-knopf:disabled {
  opacity: 0.5;
  cursor: wait;
}