/* =========================================================
   Einwilligungs-Banner

   Bewusst in einer eigenen Datei: Der Banner wird von consent.js auf
   JEDER Seite eingefuegt, also muessen die Stile auch ueberall
   vorliegen. Lagen sie nur in style.css, erschien er auf Seiten ohne
   dieses Stylesheet (z. B. der PDF-Ansicht) ungestylt mitten im
   Textfluss – und landete so auch im Ausdruck.
   ========================================================= */
:root{
  --cc-ink:#1b1512; --cc-muted:#7d6f66; --cc-paper:#fff;
  --cc-cream:#f2eae0; --cc-brand:#9c1f28; --cc-green:#3f6b4a;
  --cc-line:rgba(27,21,18,.12);
  --cc-ease:cubic-bezier(.22,.75,.28,1);
}

/* ---------- COOKIE ---------- */
.cookie{
  position:fixed;left:50%;bottom:1.5rem;z-index:700;
  width:min(540px, calc(100vw - 2rem));
  transform:translate(-50%, 160%);opacity:0;
  transition:transform .6s var(--cc-ease), opacity .45s var(--cc-ease);
  max-height:calc(100vh - 3rem);
  max-height:calc(100dvh - 3rem);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--cc-paper);border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(27,21,18,.45);border:1px solid var(--cc-line);
}
.cookie.is-open{transform:translate(-50%, 0);opacity:1;}
.cookie__body{padding:1.5rem 1.6rem 1.4rem;position:relative;}

.cookie__close{
  position:absolute;right:.85rem;top:.85rem;
  width:32px;height:32px;border-radius:50%;
  font-size:1.35rem;line-height:1;color:var(--cc-muted);
  display:grid;place-items:center;
  transition:background .28s var(--cc-ease), color .28s var(--cc-ease), transform .28s var(--cc-ease);
}
.cookie__close:hover{background:var(--cc-cream);color:var(--cc-brand);transform:rotate(90deg);}

.cookie__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;padding-right:2rem;}
.cookie__ico{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(156,31,40,.09);color:var(--cc-brand);
}
.cookie__ico svg{width:19px;height:19px;}
.cookie h3{font-size:1.15rem;margin:0;}
.cookie p{font-size:.87rem;line-height:1.55;margin-bottom:1.2rem;color:var(--cc-ink);}

.cookie__actions{display:flex;gap:.6rem;}
.cookie__actions .btn{flex:1 1 0;}

.cookie__more{
  display:block;margin:.9rem auto 0;
  font-size:.78rem;color:var(--cc-muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .25s;
}
.cookie__more:hover{color:var(--cc-brand);}

/* Einstellungen */
.cookie__settings{
  margin:0 0 1.2rem;
  border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);
  animation:ccOpen .35s var(--cc-ease);
}
@keyframes ccOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.cc-item{
  display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
  padding:.8rem 0;border-bottom:1px dotted var(--cc-line);cursor:pointer;
}
.cc-item:last-child{border-bottom:0;}
.cc-item__text{display:flex;flex-direction:column;gap:.08rem;}
.cc-item__text strong{font-size:.87rem;font-weight:600;color:var(--cc-ink);}
.cc-item__text span{font-size:.75rem;line-height:1.4;color:var(--cc-muted);}

.cc-switch{position:relative;display:block;width:42px;height:23px;flex:none;margin-top:.15rem;}
.cc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.cc-switch i{
  position:absolute;inset:0;display:block;border-radius:999px;
  background:#d6cabf;transition:background .3s var(--cc-ease);pointer-events:none;
}
.cc-switch i::after{
  content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(27,21,18,.35);
  transition:transform .3s var(--cc-ease);
}
.cc-switch input:checked + i{background:var(--cc-brand);}
.cc-switch input:checked + i::after{transform:translateX(19px);}
.cc-switch input:disabled{cursor:default;}
.cc-switch input:disabled + i{background:var(--cc-green);opacity:.6;}
.cc-switch input:focus-visible + i{outline:2px solid var(--c-gold);outline-offset:3px;}


/* Mobil: schmaler Rand, Knoepfe untereinander */
@media (max-width:720px){
  html{--cc-mobile-ui-offset:0rem;}
  html.home-page{--cc-mobile-ui-offset:5.35rem;}
  .cookie{
    left:max(1rem, env(safe-area-inset-left));
    right:max(1rem, env(safe-area-inset-right));
    bottom:calc(.75rem + env(safe-area-inset-bottom) + var(--cc-mobile-ui-offset));
    width:auto;
    transform:translateY(160%);
    max-height:calc(100vh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--cc-mobile-ui-offset));
    max-height:calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--cc-mobile-ui-offset));
  }
  .cookie.is-open{transform:translateY(0);}
  .cookie__body{padding:1.3rem 1.2rem 1.2rem;}
  .cookie__close{width:44px;height:44px;right:.55rem;top:.55rem;}
  .cookie__actions{flex-direction:column;}
}

/* Im Ausdruck hat der Banner nichts zu suchen */
@media print{
  .cookie{display:none !important;}
}