/* PromptSite – Hinweis-Widget (Bundle-CSS). Nutzt die --ps-w-*-Variablen (beim Publish aus
   der Stil-Ernte befüllt, Fallbacks in inject.js). z-index-Ordnung (Konzept §3a.5):
   A11y 2147483200/201 (immer erreichbar) > Notice 2147483100 > Consent 2147483000. */

.ps-notice-overlay {
  position: fixed; inset: 0; z-index: 2147483100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .5);
}
.ps-notice-modal {
  box-sizing: border-box; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--ps-w-surface, #fff); color: var(--ps-w-text, #18181b);
  font-family: var(--ps-w-font, system-ui, sans-serif); font-size: 15px; line-height: 1.55;
  border-radius: var(--ps-w-radius-surface, 12px); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  padding: 22px 22px 20px; position: relative;
}

/* Banner-Stapel: mehrere gleichzeitig fällige Banner untereinander (kein Überlappen).
   Die Positions-Leiste ist fixiert; die Banner fließen darin. Oben normal, unten
   umgekehrt (neuere stapeln nach innen). */
.ps-notice-stack { position: fixed; left: 0; right: 0; z-index: 2147483100; display: flex; flex-direction: column; }
.ps-notice-stack[data-pos="oben"] { top: 0; }
.ps-notice-stack[data-pos="unten"] { bottom: 0; flex-direction: column-reverse; }

.ps-notice-banner {
  position: relative;
  box-sizing: border-box; padding: 12px 44px 12px 16px;
  background: var(--ps-w-surface, #fff); color: var(--ps-w-text, #18181b);
  font-family: var(--ps-w-font, system-ui, sans-serif); font-size: 14px; line-height: 1.5;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ps-notice-stack[data-pos="oben"] .ps-notice-banner { border-bottom: 1px solid rgba(120, 120, 120, .28); }
.ps-notice-stack[data-pos="unten"] .ps-notice-banner { border-top: 1px solid rgba(120, 120, 120, .28); }

.ps-notice-title { margin: 0 0 6px; font-size: 1.1em; font-weight: 700; }
.ps-notice-banner .ps-notice-title { margin: 0; font-size: 1em; }
.ps-notice-text { margin: 0 0 8px; }
.ps-notice-text:last-child { margin-bottom: 0; }
.ps-notice-text a { color: var(--ps-w-primary, #4f46e5); }
.ps-notice-body { flex: 1 1 240px; min-width: 0; }

/* Optionales Bild: im Modal/Inline volle Breite (gedeckelter Radius), im Banner klein daneben. */
.ps-notice-img { display: block; max-width: 100%; height: auto; border-radius: var(--ps-w-radius-surface, 12px); margin: 0 0 12px; }
.ps-notice-banner .ps-notice-img { max-height: 40px; width: auto; margin: 0; border-radius: 8px; }

/* Inline-Darstellung: Karte im Seiteninhalt an der data-ps="hinweis"-Stelle (kein Overlay). */
.ps-notice-inline {
  position: relative; box-sizing: border-box;
  background: var(--ps-w-surface, #fff); color: var(--ps-w-text, #18181b);
  font-family: var(--ps-w-font, system-ui, sans-serif); font-size: 15px; line-height: 1.55;
  border: 1px solid rgba(120, 120, 120, .28); border-radius: var(--ps-w-radius-surface, 12px);
  padding: 18px 44px 18px 18px; margin: 16px 0;
}

.ps-notice-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.ps-notice-banner .ps-notice-actions { margin-top: 0; }
.ps-notice-btn {
  font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
  border-radius: var(--ps-w-radius-control, 8px); padding: 9px 16px; min-height: 40px;
  border: 1px solid var(--ps-w-primary, #4f46e5);
  background: var(--ps-w-primary, #4f46e5); color: var(--ps-w-on-primary, #fff);
}
.ps-notice-btn:focus-visible, .ps-notice-close:focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; }

.ps-notice-close {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; line-height: 1;
  font: inherit; font-size: 22px; cursor: pointer; border: 0; border-radius: 8px;
  background: transparent; color: inherit; opacity: .7;
}
.ps-notice-banner .ps-notice-close { position: absolute; top: 50%; transform: translateY(-50%); right: 8px; }
.ps-notice-close:hover { opacity: 1; }