/* =========================================================
   MIZ OFFICE – COMPLIANZ COOKIE BANNER
   MASTER PREMIUM · LIGHT LUXURY · APPLE-GLASS
   CSS-ONLY PLUGIN OVERRIDE
   ---------------------------------------------------------
   !important ist hier Pflicht: Complianz setzt Inline-Styles,
   die nur so zu überschreiben sind (legitime Drittanbieter-
   Ausnahme, kein Quick-Fix in eigenem Code).
   ========================================================= */

/* =========================================================
   00) TOKENS
   ========================================================= */

.cmplz-cookiebanner{
  --cb-bg:           rgba(252,252,253,.96);
  --cb-bg-tint:      rgba(248,250,252,.92);
  --cb-border:       rgba(15,23,42,.10);
  --cb-rule:         rgba(15,23,42,.07);

  --cb-ink:          #0b1220;
  --cb-ink-strong:   #060b16;
  --cb-ink-soft:     #475569;
  --cb-ink-muted:    #6b7686;

  --cb-accent:       #0a84ff;
  --cb-accent-deep:  #0050e6;
  --cb-accent-soft:  rgba(10,132,255,.12);

  --cb-radius:       22px;
  --cb-radius-btn:   13px;
  --cb-pad:          18px;

  --cb-dur:          .2s;
  --cb-ease:         cubic-bezier(.16,1,.3,1);

  --cb-shadow:
     0 28px 60px -12px rgba(11,18,32,.22),
     0 12px 28px -8px  rgba(11,18,32,.12),
     0 1px 0 rgba(255,255,255,.85) inset,
     0 0 0 .5px rgba(15,23,42,.04);

  --cb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* =========================================================
   01) ROOT BANNER
   ========================================================= */

.cmplz-cookiebanner{
  position: fixed !important;
  box-sizing: border-box !important;           /* sonst max-width + Padding = zu breit */
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: auto !important;
  max-width: 440px !important;
  margin-left: auto !important;
  padding: var(--cb-pad) !important;

  border: 1px solid var(--cb-border) !important;
  border-radius: var(--cb-radius) !important;
  background:
    linear-gradient(180deg, var(--cb-bg) 0%, var(--cb-bg-tint) 100%) !important;
  color: var(--cb-ink) !important;
  box-shadow: var(--cb-shadow) !important;

  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;

  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 9999 !important;
}

/* Einblendung nur wenn Complianz das Banner aktiv zeigt –
   bleibt sonst voll sichtbar, kann nie auf opacity:0 stranden */
.cmplz-cookiebanner.cmplz-show,
.cmplz-cookiebanner.cmplz-fade-in{
  animation: cbRise .5s var(--cb-ease) .05s both !important;
}

@keyframes cbRise{
  from{ opacity: 0; transform: translateY(18px) scale(.97); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

/* Layer 1 – Glow + Verlaufslicht */
.cmplz-cookiebanner::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(10,132,255,.08) 0%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%) !important;
  z-index: 0 !important;
}

/* Layer 2 – feines Grain */
.cmplz-cookiebanner::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: var(--cb-grain) !important;
  background-size: 120px 120px !important;
  opacity: .035 !important;
  mix-blend-mode: multiply !important;
  z-index: 0 !important;
}

.cmplz-cookiebanner > *{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   02) TYPO – Eyebrow (mit Bullet) + Titel
   ========================================================= */

.cmplz-cookiebanner .cmplz-title{
  position: relative !important;
  margin: 2px 0 10px 0 !important;
  padding-top: 22px !important;                /* Platz für Eyebrow */
  color: var(--cb-ink-strong) !important;
  font-size: 19px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* Eyebrow mit integriertem Punkt – echte Zeichen, keine \-Escapes */
.cmplz-cookiebanner .cmplz-title::before{
  content: "•  Datenschutz" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--cb-accent-deep) !important;
  opacity: .92 !important;
}

.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p{
  margin: 0 !important;
  color: var(--cb-ink-soft) !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

.cmplz-cookiebanner .cmplz-description{
  color: var(--cb-ink-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.cmplz-cookiebanner .cmplz-category-title{
  color: var(--cb-ink-strong) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* =========================================================
   03) LINKS
   ========================================================= */

.cmplz-cookiebanner a{
  color: var(--cb-accent) !important;
  text-decoration: none !important;
  transition: color var(--cb-dur) var(--cb-ease),
              opacity var(--cb-dur) var(--cb-ease) !important;
}

.cmplz-cookiebanner a:focus,
.cmplz-cookiebanner a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--cb-accent-soft) !important;
  border-radius: 8px !important;
}

/* =========================================================
   04) SETTINGS / CATEGORIES
   ========================================================= */

.cmplz-cookiebanner .cmplz-category{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--cb-rule) !important;
}

/* =========================================================
   05) TOGGLE
   ========================================================= */

.cmplz-cookiebanner .cmplz-toggle-switch{
  background: #d3dae3 !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.16) !important;
  transition: background-color var(--cb-dur) var(--cb-ease) !important;
}

.cmplz-cookiebanner .cmplz-toggle-switch.cmplz-active{
  background: linear-gradient(135deg, var(--cb-accent) 0%, var(--cb-accent-deep) 100%) !important;
  box-shadow: inset 0 1px 2px rgba(0,80,230,.4),
              0 0 12px var(--cb-accent-soft) !important;
}

.cmplz-cookiebanner .cmplz-toggle-switch .cmplz-slider{
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.22) !important;
}

/* =========================================================
   06) BUTTON AREA
   ========================================================= */

.cmplz-cookiebanner .cmplz-buttons{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.cmplz-cookiebanner .cmplz-btn{
  position: relative !important;
  appearance: none !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 16px !important;
  border-radius: var(--cb-radius-btn) !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition:
    transform var(--cb-dur) var(--cb-ease),
    box-shadow var(--cb-dur) var(--cb-ease),
    background-color var(--cb-dur) var(--cb-ease),
    border-color var(--cb-dur) var(--cb-ease),
    color var(--cb-dur) var(--cb-ease),
    opacity var(--cb-dur) var(--cb-ease) !important;
}

.cmplz-cookiebanner .cmplz-btn:active{
  transform: translateY(0) scale(.982) !important;
}

.cmplz-cookiebanner .cmplz-btn:focus,
.cmplz-cookiebanner .cmplz-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,80,230,.18) !important;
}

.cmplz-cookiebanner .cmplz-btn:disabled,
.cmplz-cookiebanner .cmplz-btn[disabled]{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* =========================================================
   07/08) ACCEPT + DENY — bewusst gleichwertige Auswahl
   ========================================================= */

.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny{
  background: #ffffff !important;
  border-color: rgba(0,80,230,.34) !important;
  color: #0648c8 !important;
  box-shadow:
    0 8px 18px -10px rgba(0,80,230,.36),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* =========================================================
   09) PREFERENCES (Tertiär – Glas)
   ========================================================= */

.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: var(--cb-ink-soft) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
  min-height: 48px !important;
  color: var(--cb-ink-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* =========================================================
   10) LINKS ROW
   ========================================================= */

.cmplz-cookiebanner .cmplz-links{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 14px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--cb-rule) !important;
}

.cmplz-cookiebanner .cmplz-links a{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--cb-ink-muted) !important;
}

/* =========================================================
   11) CLOSE
   ========================================================= */

.cmplz-cookiebanner .cmplz-close{
  display: none !important;
}

/* =========================================================
   12) MANAGE-CONSENT TRIGGER (ausgeblendet)
   ========================================================= */

#cmplz-manage-consent,
.cmplz-manage-consent,
.cmplz-manage-options,
.cmplz-show-settings,
a.cmplz-manage-consent,
button.cmplz-manage-consent{
  display: none !important;
}

/* =========================================================
   13) DESKTOP
   ========================================================= */

@media (min-width: 768px){
  .cmplz-cookiebanner{
    left: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    max-width: 510px !important;
    --cb-pad: 22px !important;
    --cb-radius: 24px !important;
  }

  .cmplz-cookiebanner .cmplz-title{
    font-size: 21px !important;
  }

  .cmplz-cookiebanner .cmplz-message,
  .cmplz-cookiebanner .cmplz-message p{
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }

  .cmplz-cookiebanner .cmplz-buttons{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
  .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
    grid-column: 1 / -1 !important;
  }

  .cmplz-cookiebanner a:hover{
    color: var(--cb-ink) !important;
  }

  .cmplz-cookiebanner .cmplz-btn:hover{
    transform: translateY(-1px) !important;
  }

  .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
  .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
  .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
  .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.2) !important;
  }
}

/* =========================================================
   14) SMALL MOBILE
   ========================================================= */

@media (max-width: 420px){
  .cmplz-cookiebanner{
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    --cb-pad: 16px !important;
    --cb-radius: 20px !important;
  }

  .cmplz-cookiebanner .cmplz-title{
    font-size: 18px !important;
    padding-top: 20px !important;
  }

  .cmplz-cookiebanner .cmplz-message,
  .cmplz-cookiebanner .cmplz-message p{
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .cmplz-cookiebanner .cmplz-btn{
    min-height: 44px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   15) REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .cmplz-cookiebanner.cmplz-show,
  .cmplz-cookiebanner.cmplz-fade-in{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cmplz-cookiebanner,
  .cmplz-cookiebanner *,
  .cmplz-cookiebanner *::before,
  .cmplz-cookiebanner *::after{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}