/* =========================================
   Cookie Consent Banner + Settings Modal
   ========================================= */

/* --- Banner (Mobile-First: fixed bottom bar) --- */
div.consent-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:132;
  background:var(--panel);
  border-top:1px solid var(--border-soft);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:20px 0;
}

div.consent-banner[hidden]{display:none}

.consent-banner__inner{
  width:min(var(--container),calc(100% - 40px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

/* Title: nur in Desktop-Modal sichtbar (Mobile = Bottom-Bar ohne Heading) */
.consent-banner__title{
  display:none;
  font-family:var(--font-heading);
  font-size:clamp(20px,2.2vw,24px);
  font-weight:700;
  color:var(--c-text);
  margin:0 0 16px;
  line-height:1.2;
}

.consent-banner__text{
  flex:1;
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--c-muted);
}

.consent-banner__text a{
  color:var(--c-text);
  text-decoration:underline;
  text-underline-offset:2px;
}

.consent-banner__actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

/* --- Buttons (shared) --- */
.consent-btn{
  min-height:44px;
  padding:10px 20px;
  border-radius:var(--radius);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease,background .15s ease;
  white-space:nowrap;
}

.consent-btn:focus-visible{
  outline:2px solid rgba(38,32,21,.18);
  outline-offset:3px;
}

/* Primary: dark (accept + reject — equal prominence, DSGVO-konform) */
.consent-btn--accept,
.consent-btn--reject{
  background:var(--c-text);
  color:var(--c-bg);
  border:1px solid var(--c-text);
}

.consent-btn--accept:hover,
.consent-btn--reject:hover{opacity:.85}

/* Secondary: outline (settings only) */
.consent-btn--settings{
  background:transparent;
  color:var(--c-text);
  border:1px solid var(--border-soft);
}

.consent-btn--settings:hover{
  background:var(--c-paper);
  border-color:rgba(38,32,21,.14);
}

/* Generic secondary (outline) — Settings-Modal "Nur notwendige" + Widerspruchs-Block */
.consent-btn--secondary{
  background:transparent;
  color:var(--c-text);
  border:1px solid var(--border-soft);
}

.consent-btn--secondary:hover{
  background:var(--c-paper);
  border-color:rgba(38,32,21,.14);
}

/* --- Responsive Banner --- */
@media(max-width:980px){
  div.consent-banner{
    bottom:calc(56px + env(safe-area-inset-bottom,0px));
    padding:16px 0;
  }

  .consent-banner__inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .consent-banner__text{
    text-align:center;
  }

  .consent-banner__actions{
    flex-direction:column;
    gap:8px;
  }

  .consent-btn{width:100%}
}

@media(max-width:560px){
  .consent-banner__text{font-size:13px}
  div.consent-banner{padding:14px 0}
}

/* --- Desktop: zentriertes Modal-Dialog mit Backdrop ---
   Mobile-First bleibt erhalten; ab 981px wird der Banner zu einer
   zentrierten Card mit Backdrop. Heading wird eingeblendet.
   Backdrop-Click + Escape schliessen den Banner NICHT — eine
   Entscheidung soll bewusst und aktiv erfolgen (DSK-OH 2024). */
@media(min-width:981px){
  div.consent-banner{
    /* inset:0 setzt top/right/bottom/left = 0 — ueberschreibt den Mobile-
       Default (bottom:0;left:0;right:0;) und macht den Banner zum
       Full-Viewport-Overlay. Innerhalb dieses Overlays zentriert flex
       die innere Card. */
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(38,32,21,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    border-top:none;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .consent-banner__inner{
    width:100%;
    max-width:640px;
    margin-inline:0;
    background:var(--c-bg);
    border-radius:var(--radius);
    padding:36px 40px;
    box-shadow:0 24px 60px rgba(38,32,21,.22),0 2px 8px rgba(38,32,21,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .consent-banner__title{display:block}

  .consent-banner__text{
    flex:none;
    font-size:14.5px;
    line-height:1.6;
    margin:0 0 24px;
  }

  .consent-banner__actions{
    flex-shrink:0;
    gap:10px;
    flex-wrap:wrap;
  }

  .consent-banner__actions .consent-btn{
    flex:1 1 auto;
    min-width:140px;
  }
}

/* Body-Scroll-Lock fuer Desktop-Modal-Variante.
   Auf Mobile (Bottom-Bar) ist kein Lock noetig, weil der Banner
   den Hintergrund nicht visuell abdeckt. */
@media(min-width:981px){
  body.consent-banner-open{overflow:hidden}
}

/* =========================================
   Settings Modal
   ========================================= */

/* Overlay wrapper */
div.consent-settings{
  position:fixed;
  inset:0;
  z-index:133;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

div.consent-settings[hidden]{display:none}

/* Backdrop */
.consent-settings__backdrop{
  position:absolute;
  inset:0;
  background:rgba(38,32,21,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Dialog */
.consent-settings__dialog{
  position:relative;
  z-index:134;
  width:min(540px,100%);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  background:var(--c-bg);
  border:1px solid var(--border-softer);
  border-radius:24px;
  box-shadow:0 32px 80px rgba(38,32,21,.18);
  padding:clamp(28px,4vw,40px);
}

/* Header */
.consent-settings__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.consent-settings__title{
  font-family:var(--font-heading);
  font-size:clamp(20px,3vw,24px);
  font-weight:700;
  color:var(--c-text);
  margin:0;
}

.consent-settings__close{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--border-softer);
  border-radius:50%;
  font-size:18px;
  color:var(--c-muted);
  cursor:pointer;
  transition:background .15s ease;
  flex-shrink:0;
}

.consent-settings__close:hover{background:var(--c-paper)}
.consent-settings__close:focus-visible{
  outline:2px solid rgba(38,32,21,.18);
  outline-offset:3px;
}

/* Category rows */
.consent-settings__category{
  padding:16px 0;
  border-bottom:1px solid var(--border-softer);
}

.consent-settings__category:last-child{border-bottom:0}

/* Widerspruchs-Block (Art. 21 DSGVO) — visuell abgesetzt vom Einwilligungs-
 * Block durch grosseren Abstand + Paper-Hintergrund, damit User die andere
 * Rechtsgrundlage wahrnimmt. */
.consent-settings__category--objection{
  margin-top:24px;
  padding:18px 16px;
  background:var(--c-paper);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
}

.consent-settings__category--objection:last-child{border-bottom:1px solid var(--border-soft)}

/* 2-Button-Layout statt Toggle (rechtlich anders, UX entsprechend abgesetzt) */
.consent-objection-controls{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.consent-objection-controls .consent-btn{
  min-height:38px;
  padding:8px 14px;
  font-size:13px;
}

/* Status-Anzeige: kombiniert Farbe + Icon + Text (kein Color-only). */
.consent-objection-state{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:13px;
  line-height:1.4;
  font-weight:500;
}

.consent-objection-state::before{
  display:inline-block;
  font-size:14px;
  line-height:1;
  flex-shrink:0;
}

.consent-objection-state[data-state="active"]{
  color:var(--c-text);
}

.consent-objection-state[data-state="active"]::before{
  content:'\2713'; /* ✓ */
  color:#1f7a3a;
}

.consent-objection-state[data-state="objected"]{
  color:#8a2a2a;
}

.consent-objection-state[data-state="objected"]::before{
  content:'\26D4'; /* ⛔ */
}

.consent-settings__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.consent-settings__name{
  font-size:15px;
  font-weight:600;
  color:var(--c-text);
}

.consent-settings__badge{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  color:var(--c-muted);
  background:var(--c-paper);
  padding:2px 8px;
  border-radius:4px;
  margin-left:8px;
  vertical-align:middle;
}

.consent-settings__desc{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--c-muted);
}

/* Toggle switch */
.consent-settings__label{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}

.consent-settings__checkbox{
  position:absolute;
  width:1px;height:1px;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

.consent-settings__switch{
  position:relative;
  width:44px;height:24px;
  background:var(--border-soft);
  border-radius:12px;
  flex-shrink:0;
  transition:background .15s ease;
}

.consent-settings__switch::after{
  content:'';
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;
  border-radius:50%;
  background:#fff;
  transition:transform .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.consent-settings__checkbox:checked+.consent-settings__switch{
  background:var(--c-text);
}

.consent-settings__checkbox:checked+.consent-settings__switch::after{
  transform:translateX(20px);
}

.consent-settings__checkbox:focus-visible+.consent-settings__switch{
  outline:2px solid rgba(38,32,21,.18);
  outline-offset:3px;
}

.consent-settings__checkbox:disabled+.consent-settings__switch{
  opacity:.45;
  cursor:not-allowed;
}

.consent-settings__checkbox:disabled~.consent-settings__name{
  opacity:.65;
}

/* Footer actions */
.consent-settings__footer{
  display:flex;
  gap:8px;
  margin-top:24px;
}

.consent-settings__footer .consent-btn{flex:1}

/* Responsive modal */
@media(max-width:560px){
  div.consent-settings{padding:10px}

  .consent-settings__dialog{
    border-radius:20px;
    padding:24px 20px;
  }

  .consent-settings__footer{
    flex-direction:column;
  }
}

/* Body scroll lock */
body.consent-open{overflow:hidden}

/* =========================================
   Animations (respect reduced motion)
   ========================================= */

/* Mobile (<981px): Banner slides up from bottom, passt zur Bottom-Bar. */
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  div.consent-banner:not([hidden]){
    animation:consentSlideUp .26s cubic-bezier(.22,1,.36,1) both;
  }

  @keyframes consentSlideUp{
    from{transform:translateY(100%);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
}

/* Desktop (>=981px): Backdrop fadet sanft ein, Card popt smooth.
   - Backdrop: 240ms ease-out fade only (kein Bewegen, sonst wirkt's "wackelig")
   - Card: 320ms cubic-bezier(.16,1,.3,1) ("easeOutExpo") — leichtes
     Scale-Up + dezenter Move-Up, fühlt sich modern und natürlich an
   - Card-Animation startet 60ms verzögert, damit Backdrop schon
     erkennbar ist bevor die Card erscheint (Wahrnehmungs-Hierarchie). */
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  div.consent-banner:not([hidden]){
    animation:consentBackdropFade .24s ease-out both;
  }

  .consent-banner__inner{
    animation:consentBannerPop .32s cubic-bezier(.16,1,.3,1) .06s both;
  }

  @keyframes consentBackdropFade{
    from{opacity:0}
    to{opacity:1}
  }

  @keyframes consentBannerPop{
    from{transform:translateY(12px) scale(.96);opacity:0}
    to{transform:translateY(0) scale(1);opacity:1}
  }
}

/* Settings-Modal: identische "Pop"-Animation auf allen Breakpoints. */
@media(prefers-reduced-motion:no-preference){
  .consent-settings__dialog{
    animation:consentPop .22s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes consentPop{
    from{transform:translateY(12px) scale(.96);opacity:0}
    to{transform:translateY(0) scale(1);opacity:1}
  }
}