/* =============================================================================
   PFLEGECAMPUS · COOKIE-CONSENT · CSS
   -----------------------------------------------------------------------------
   In den <head> der Seite einbinden — entweder als externer Stylesheet:
     <link rel="stylesheet" href="/assets/css/pflegecampus-cookie-consent.css">
   oder direkt inline in einen <style>-Block.

   Alle Klassen sind mit pc-cc- gepräfixt, damit nichts mit dem bestehenden
   Pflegecampus-CSS kollidiert. Alle Farben sind als CSS-Custom-Properties
   auf :root definiert — falls Werte projektweit aus Tokens kommen sollen,
   können die Variablen einfach überschrieben werden.
   ============================================================================= */

/* ---- Design-Tokens (1:1 nach Figma Gray Scale) --------------------------- */
:root {
  --pc-cc-color-primary:        #111827;   /* Gray 900 — bewusst NICHT Brand-CTA */
  --pc-cc-color-primary-hover:  #000000;
  --pc-cc-color-text:           #111827;   /* Gray 900 */
  --pc-cc-color-text-muted:     #4B5563;   /* Gray 600 */
  --pc-cc-color-text-subtle:    #4B5563;   /* Gray 600 — Kontrast Badge AA/AAA */
  --pc-cc-color-border:         #E5E7EB;   /* Gray 200 */
  --pc-cc-color-border-strong:  #111827;   /* Gray 900 */
  --pc-cc-color-divider:        #F3F4F6;   /* Gray 100 */
  --pc-cc-color-surface:        rgba(255, 255, 255, 0.96);
  --pc-cc-color-surface-soft:   #E5E7EB;   /* Gray 200 — Hover-Affordance */
  --pc-cc-color-toggle-on:      #89B63F;   /* Pflegecampus-Grün (Figma) */
  --pc-cc-shadow:               0 1px 2px rgba(17, 24, 39, 0.04),
                                0 12px 40px rgba(17, 24, 39, 0.10);
  --pc-cc-radius-pill:          999px;
  --pc-cc-radius-card:          16px;
  --pc-cc-radius-toggle:        100px;
  --pc-cc-font:                 "Open Sans", -apple-system, BlinkMacSystemFont,
                                "Segoe UI", Roboto, sans-serif;
}

.pc-cc-banner,
.pc-cc-banner * {
  box-sizing: border-box;
  font-family: var(--pc-cc-font);
}

/* ---- Wide-Bar: länglich am unteren Rand ---------------------------------- */
.pc-cc-banner {
  position: fixed;
  z-index: 999999;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  width: min(960px, calc(100vw - 32px));
  background: var(--pc-cc-color-surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--pc-cc-color-border);
  border-radius: var(--pc-cc-radius-card);
  box-shadow: var(--pc-cc-shadow);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pc-cc-color-text);
  opacity: 0;
  transition: opacity 0.3s ease,
              transform 0.32s cubic-bezier(.2,.8,.2,1),
              width 0.32s cubic-bezier(.4, 0, .2, 1),
              padding 0.32s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.pc-cc-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Stage: rahmt Ebene 1 und 2, animiert die Höhe smooth zwischen den beiden.
   overflow:hidden verhindert, dass die ausgeblendete Ebene während der
   Transition über den sichtbaren Bereich „bleedet". Falls der Inhalt nicht
   in den Viewport passt (z. B. Landscape-Mobile), setzt JS overflowY:auto
   und macht die Stage scrollbar. */
.pc-cc-stage {
  position: relative;
  transition: height 0.32s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---- Level 1 + Level 2: absolut gestapelt im Stage für sauberen Crossfade -- */
.pc-cc-level-1,
.pc-cc-level-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.22s ease;
}
.pc-cc-level-2 {
  opacity: 0;
  pointer-events: none;
}
.pc-cc-banner.is-settings-open .pc-cc-level-1 {
  opacity: 0;
  pointer-events: none;
}
.pc-cc-banner.is-settings-open .pc-cc-level-2 {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Level 1: Text links, drei Buttons rechts ---------------------------- */
.pc-cc-level-1 {
  display: flex;
  align-items: center;
  gap: 24px;
}
.pc-cc-message {
  flex: 1;
  min-width: 0;
}
.pc-cc-banner-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pc-cc-color-text);
}
.pc-cc-text {
  margin: 0;
  color: var(--pc-cc-color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.pc-cc-text strong {
  color: var(--pc-cc-color-text);
  font-weight: 700;
}

.pc-cc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---- Buttons: 40 px hoch, rund (Pille) ----------------------------------- */
.pc-cc-btn {
  appearance: none;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--pc-cc-radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.05s ease;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-cc-btn:active { transform: translateY(1px); }

/* CTA PRIMARY (filled, Dark Navy — NICHT Brand-CTA) */
.pc-cc-btn--primary {
  background: var(--pc-cc-color-primary);
  color: #fff;
}
.pc-cc-btn--primary:hover { background: var(--pc-cc-color-primary-hover); }
.pc-cc-btn--primary:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.35);
  outline-offset: 2px;
}

/* CTA SECONDARY (outlined, rund). Hover bleibt outlined, damit es sich nicht
   wie Primary verhält — der Unterschied filled/outlined muss erhalten bleiben. */
.pc-cc-btn--secondary {
  background: #fff;
  color: var(--pc-cc-color-text);
  border: 1.5px solid var(--pc-cc-color-border-strong);
}
.pc-cc-btn--secondary:hover {
  background: var(--pc-cc-color-surface-soft);
  color: #000;
}
.pc-cc-btn--secondary:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.25);
  outline-offset: 2px;
}

/* TEXTLINK-PRIMARY (kein Hintergrund, kein Border, keine Unterstreichung) */
.pc-cc-btn--textlink {
  background: transparent;
  color: var(--pc-cc-color-text);
  height: auto;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.pc-cc-btn--textlink:hover {
  color: #000;
  background: var(--pc-cc-color-surface-soft);
}

/* ---- Mobile: stapeln ----------------------------------------------------- */
@media (max-width: 740px) {
  .pc-cc-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: translateY(20px);
    padding: 18px;
  }
  .pc-cc-banner.is-visible { transform: translateY(0); }
  .pc-cc-level-1 {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .pc-cc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pc-cc-btn { padding: 0 14px; font-size: 13px; }
  .pc-cc-btn--textlink {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 6px 10px;
  }
}

/* ---- Level 2: Einstellungen (kompakte Karte) ----------------------------- */
.pc-cc-banner.is-settings-open {
  width: min(560px, calc(100vw - 32px));
  padding: 24px 24px 20px;
}
@media (max-width: 540px) {
  .pc-cc-banner.is-settings-open { width: auto; padding: 20px; }
}

.pc-cc-back {
  background: transparent;
  border: 0;
  color: var(--pc-cc-color-text-subtle);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.pc-cc-back:hover { color: var(--pc-cc-color-text); }

.pc-cc-settings-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--pc-cc-color-text);
}

.pc-cc-categories {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 18px;
  /* Bewusst KEIN max-height: alle Kategorien sind direkt sichtbar, damit
     Marketing nicht unter einer Scroll-Grenze versteckt wird. Edge-Case
     für sehr kurze Viewports übernimmt der Stage-Container per JS. */
}
.pc-cc-category {
  padding: 14px 4px;
  border-bottom: 1px solid var(--pc-cc-color-divider);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pc-cc-category:last-child { border-bottom: 0; }
.pc-cc-cat-info {
  flex: 1;
  min-width: 0;
  padding-right: 32px; /* Atemzone zum Toggle, damit Texte konsistent umbrechen */
}
@media (max-width: 540px) {
  .pc-cc-cat-info { padding-right: 16px; }
}
.pc-cc-cat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pc-cc-color-text);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-cc-cat-required {
  font-size: 10.5px;
  color: var(--pc-cc-color-text-subtle);
  background: var(--pc-cc-color-surface-soft);
  padding: 2px 8px;
  border-radius: var(--pc-cc-radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pc-cc-cat-desc {
  font-size: 13px;
  color: var(--pc-cc-color-text-muted);
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}
/* ---- Toggle — 1:1 nach Figma (Node 3:1206) ------------------------------- */
/* 56×32, Thumb 24×24, 4 px Inset, zwei Drop-Shadows.
   Aktiv-Farbe = Pflegecampus-Grün #89B63F.
   Math: thumb start left=4, transform 24px → right end = 56-24-4=28 ✓ */
.pc-cc-toggle {
  position: relative;
  width: 56px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-block;
  cursor: pointer;
}
.pc-cc-toggle:has(input:disabled) {
  cursor: not-allowed;
}
.pc-cc-toggle input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  cursor: pointer;
  margin: 0;
}
.pc-cc-toggle-track {
  position: absolute; inset: 0;
  background: #D1D5DB;                /* Gray 300 — Toggle-Off */
  border-radius: var(--pc-cc-radius-toggle);
  transition: background 0.2s ease;
}
.pc-cc-toggle-thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 2px 4px  rgba(0, 0, 0, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}
.pc-cc-toggle input:checked ~ .pc-cc-toggle-track { background: var(--pc-cc-color-toggle-on); }
.pc-cc-toggle input:checked ~ .pc-cc-toggle-thumb { transform: translateX(24px); }
.pc-cc-toggle input:disabled { cursor: not-allowed; }
.pc-cc-toggle input:disabled ~ .pc-cc-toggle-track { background: #D1D5DB; opacity: 0.7; }   /* Gray 300 */
.pc-cc-toggle input:disabled ~ .pc-cc-toggle-thumb { background: #F3F4F6; }                 /* Gray 100 */

.pc-cc-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pc-cc-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pc-cc-color-divider);
  font-size: 12px;
  color: var(--pc-cc-color-text-subtle);
  display: flex;
  gap: 16px;
  justify-content: center;
}
.pc-cc-meta a {
  color: var(--pc-cc-color-text-subtle);
  text-decoration: none;
  font-weight: 600;
}
.pc-cc-meta a:hover { color: var(--pc-cc-color-text); text-decoration: underline; }

/* ---- Schwebender Reopen-Button (optional) -------------------------------- */
.pc-cc-reopen {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999990;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--pc-cc-color-border);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}
.pc-cc-reopen.is-visible { display: flex; }
.pc-cc-reopen:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.16);
}
.pc-cc-reopen svg { width: 20px; height: 20px; }

/* ---- Blocked embed placeholder (pc-blocked-embed) ------------------------- */
.pc-cc-embed-placeholder {
  border: 1px dashed var(--pc-cc-color-border-strong);
  border-radius: var(--pc-cc-radius-card);
  background: var(--pc-cc-color-surface-soft);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  color: var(--pc-cc-color-text);
  font-family: var(--pc-cc-font);
  font-size: 14px;
  line-height: 1.5;
}
.pc-cc-embed-placeholder .pc-cc-embed-text {
  margin: 0;
}
