/* PromptSite – Cookie-Consent-Widget (Bundle-CSS). Thematisiert AUSSCHLIESSLICH über
   die --ps-w-*-Variablen (beim Publish aus der Stil-Ernte befüllt, Fallbacks in inject.js).
   Namensraum: alle Klassen mit ps-c- / ps-embed- (Kollisionsschutz). */

.ps-c-root, .ps-c-root * { box-sizing: border-box; }

/* ---- Banner ---- */
/* Container = FLÄCHE → moderater Radius (radius-surface, gedeckelt). Standard unten-links
   mit klarer Verankerung + Abstand zum Rand. Solide Fläche (Mindestkontrast in inject.js). */
.ps-c-banner {
  position: fixed; bottom: 16px; left: 16px; right: auto; z-index: 2147483000;
  width: calc(100vw - 32px); max-width: 440px;
  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;
  border: 1px solid rgba(120,120,120,.28); border-radius: var(--ps-w-radius-surface, 12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 20px 22px; overflow: hidden;
}
.ps-c-banner[data-pos="unten-links"]  { left: 16px; right: auto; }
.ps-c-banner[data-pos="unten-rechts"] { right: 16px; left: auto; }
.ps-c-banner[data-pos="unten-voll"]   { left: 16px; right: 16px; width: auto; max-width: none; }
.ps-c-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ps-c-text { margin: 0 0 14px; }
.ps-c-text a { color: var(--ps-w-primary, #4f46e5); }

.ps-c-cats { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.ps-c-cat { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.ps-c-cat input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--ps-w-primary, #4f46e5); }
.ps-c-cat.ps-c-fixed { opacity: .75; }
.ps-c-cat-txt { display: flex; flex-direction: column; gap: 2px; }
.ps-c-cat-label { font-weight: 600; }
.ps-c-cat-desc { font-size: 12px; opacity: .8; line-height: 1.4; }
.ps-c-policy-link { color: var(--ps-w-primary, #4f46e5); }

.ps-c-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Buttons = STEUERELEMENTE → radius-control (Pill wie die Site-Buttons erlaubt). */
.ps-c-btn {
  font: inherit; cursor: pointer; border-radius: var(--ps-w-radius-control, 8px);
  padding: 9px 16px; border: 1px solid var(--ps-w-primary, #4f46e5); min-height: 40px;
}
.ps-c-btn-primary { background: var(--ps-w-primary, #4f46e5); color: #fff; }
.ps-c-btn-ghost { background: transparent; color: var(--ps-w-text, #18181b); border-color: rgba(120,120,120,.4); }
.ps-c-btn:focus-visible, .ps-c-cat input:focus-visible, .ps-embed-load:focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; }

/* ---- Footer-Widerruf-Link ---- */
.ps-c-reopen { cursor: pointer; text-decoration: underline; color: inherit; background: none; border: 0; font: inherit; padding: 0; }
.ps-c-reopen-fixed { position: fixed; left: 12px; bottom: 12px; z-index: 2147482000;
  background: var(--ps-w-surface,#fff); color: var(--ps-w-text,#18181b); border: 1px solid rgba(120,120,120,.3);
  border-radius: var(--ps-w-radius-control,8px); padding: 6px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* ---- Embed-Platzhalter (Zwei-Klick) ---- */
.ps-embed-gate { position: relative; }
.ps-embed-ph {   /* Fläche → radius-surface */
  background: rgba(120,120,120,.10); color: var(--ps-w-text, #18181b);
  font-family: var(--ps-w-font, system-ui, sans-serif); font-size: 14px; line-height: 1.5;
  border: 1px dashed rgba(120,120,120,.5); border-radius: var(--ps-w-radius-surface, 12px);
  padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 120px; justify-content: center;
}
.ps-embed-txt { margin: 0; max-width: 46ch; }
.ps-embed-load {   /* Button → radius-control */
  font: inherit; cursor: pointer; background: var(--ps-w-primary, #4f46e5); color: #fff;
  border: 0; border-radius: var(--ps-w-radius-control, 8px); padding: 9px 16px; min-height: 40px;
}
.ps-embed-always { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.ps-embed-always input { accent-color: var(--ps-w-primary, #4f46e5); }

@media (prefers-reduced-motion: reduce) { .ps-c-banner { box-shadow: none; } }

/* ---- Modal (Einstellungen / Cookie-Richtlinie) – Website-Stil über --ps-w-* ---- */
.ps-c-modal-overlay {
  position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: 20px;
}
.ps-c-modal {
  position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 40px); 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: 14px; line-height: 1.55;
  border: 1px solid rgba(120,120,120,.28); border-radius: var(--ps-w-radius-surface, 12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.32); padding: 24px 24px 20px;
}
.ps-c-modal-close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; font-size: 22px; line-height: 1;
  cursor: pointer; border: 0; background: transparent; color: var(--ps-w-text, #18181b); border-radius: var(--ps-w-radius-control, 8px);
}
.ps-c-modal-close:hover { background: rgba(120,120,120,.14); }
.ps-c-modal-close:focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; }
.ps-c-modal-body { min-height: 60px; }
/* Im Modal spannt das Consent-Formular über die volle Breite (kein Corner-Layout). */
.ps-c-modal .ps-c-form { max-width: none; }