/* Pinka Cookie Banner - Styles
 * ----------------------------------------------------------------
 *  FARBEN & DESIGN ANPASSEN:
 *  Hier oben die Werte aendern - der Rest des CSS muss nicht angefasst werden.
 * ---------------------------------------------------------------- */
:root {
  /* Pinka-Fux Brand-Farben */
  --pcb-pink-start:    #ec3a8a;   /* Gradient Start (pink) */
  --pcb-pink-end:      #f25a4e;   /* Gradient Ende (rot/koralle) */
  --pcb-pink-glow:     rgba(236, 58, 138, 0.35); /* Schatten unter dem Button */

  /* Text & Hintergrund */
  --pcb-bg:            #ffffff;
  --pcb-text:          #1a1a1a;
  --pcb-text-muted:    #555555;
  --pcb-text-soft:     #6b6b6b;

  /* Rahmen & Boxen */
  --pcb-border:        #e7e7ea;
  --pcb-border-hover:  #1a1a1a;
  --pcb-cat-bg:        #fafafa;

  /* Sekundaer-Button (z. B. "Lass uns reden" Stil) */
  --pcb-secondary-bg:    #ffffff;
  --pcb-secondary-text:  #1a1a1a;
  --pcb-secondary-border:#1a1a1a;

  /* Overlay hinter dem Banner */
  --pcb-overlay-bg:    rgba(20, 20, 25, 0.55);

  /* Form & Typo */
  --pcb-radius:        20px;       /* Modal Rundung */
  --pcb-radius-cat:    14px;       /* Kategorie-Box Rundung */
  --pcb-pill:          999px;      /* Pill-Buttons */
  --pcb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
/* ---------------------------------------------------------------- */

.pcb-overlay {
  position: fixed;
  inset: 0;
  background: var(--pcb-overlay-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2147483600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  font-family: var(--pcb-font);
  animation: pcb-fade 0.25s ease-out;
}

@keyframes pcb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pcb-modal {
  background: var(--pcb-bg);
  color: var(--pcb-text);
  width: 100%;
  max-width: 720px;
  border-radius: var(--pcb-radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  padding: 32px;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
  animation: pcb-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pcb-slide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 600px) {
  .pcb-overlay { align-items: center; }
}

.pcb-links {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--pcb-text-soft);
}
.pcb-links a {
  color: var(--pcb-text-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pcb-links a:hover { color: var(--pcb-text); }

.pcb-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pcb-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcb-icon svg,
.pcb-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.pcb-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (max-width: 520px) {
  .pcb-icon { width: 40px; height: 40px; }
  .pcb-title { font-size: 19px; }
}

.pcb-desc {
  margin: 0 0 22px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pcb-text-muted);
}

.pcb-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.pcb-cat {
  display: block;
  background: var(--pcb-cat-bg);
  border: 1px solid var(--pcb-border);
  border-radius: var(--pcb-radius-cat);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pcb-cat:hover { border-color: var(--pcb-border-hover); background: #ffffff; }
.pcb-cat-locked { cursor: default; opacity: 0.85; }
.pcb-cat-locked:hover { border-color: var(--pcb-border); background: var(--pcb-cat-bg); }

.pcb-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pcb-cat-head input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pcb-pink-start);
  margin: 0;
  cursor: pointer;
}
.pcb-cat-locked .pcb-cat-head input[type="checkbox"] { cursor: not-allowed; }

.pcb-cat-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
}

.pcb-cat-info {
  margin: 6px 0 0 28px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pcb-text-muted);
}

.pcb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.pcb-btn {
  appearance: none;
  border: 2px solid transparent;
  border-radius: var(--pcb-pill);
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.2;
}
.pcb-btn:focus-visible {
  outline: 3px solid var(--pcb-pink-start);
  outline-offset: 2px;
}

.pcb-btn-secondary {
  background: var(--pcb-secondary-bg);
  color: var(--pcb-secondary-text);
  border-color: var(--pcb-secondary-border);
}
.pcb-btn-secondary:hover {
  background: var(--pcb-secondary-text);
  color: var(--pcb-secondary-bg);
}

.pcb-btn-primary {
  background: linear-gradient(95deg, var(--pcb-pink-start) 0%, var(--pcb-pink-end) 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px var(--pcb-pink-glow);
}
.pcb-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px var(--pcb-pink-glow);
}
.pcb-btn-primary:active {
  transform: translateY(0);
}
.pcb-btn-primary::after {
  content: " \2192";
  display: inline;
  margin-left: 4px;
  transition: margin-left 0.15s ease;
}
.pcb-btn-primary:hover::after {
  margin-left: 8px;
}

@media (max-width: 520px) {
  .pcb-modal { padding: 24px; border-radius: 16px; }
  .pcb-actions { flex-direction: column-reverse; align-items: stretch; }
  .pcb-btn { width: 100%; text-align: center; }
}