/* Cookie banner and the footer's "Cookie settings" link, on every page of
   miseenkit.com (landing and legal, EN and DE). Uses the page's own tokens
   (--paper, --ink, --ink-2, --rule, --radius, --focus), which home.css and
   legal.css both define, so it follows the Light / Dark switch the same way.
   Accept and Reject look exactly alike: refusing is as easy as agreeing.
   The banner is fixed to the bottom and never pushes content around; the
   page gets bottom padding of the banner's height so nothing is hidden for
   good. Script: /consent.mjs. */
.consent {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--paper); color:var(--ink);
  border-top:2px solid var(--rule);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}
.consent-inner {
  width:min(1040px, 100% - 40px); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
}
.consent-text { flex:1 1 28rem; font-size:14px; line-height:20px; margin:0; }
.consent-text a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:flex; gap:10px; flex:0 0 auto; }
.consent-btn {
  min-height:48px; min-width:132px; padding:0 20px;
  border:1.5px solid var(--ink); border-radius:var(--radius);
  background:var(--paper); color:var(--ink);
  font:inherit; font-size:16px; font-weight:600; cursor:pointer;
}
.consent-btn:hover { background:var(--ink); color:var(--paper); }
.consent-btn:focus-visible, .consent-text a:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
body.consent-open { padding-bottom:var(--consent-h, 0px); }
/* Footer link that reopens the banner: looks like its neighbours. */
.consent-link {
  display:inline-flex; min-height:44px; align-items:center;
  background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:15px; color:inherit; cursor:pointer;
}
.consent-link[hidden] { display:none; }
.consent-link:hover { text-decoration:underline; text-underline-offset:4px; }
@media (max-width: 480px) {
  .consent-actions { width:100%; }
  .consent-btn { flex:1 1 0; min-width:0; min-height:44px; }
  .consent { padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .consent-inner { gap:8px; }
}
@media (min-width: 900px) { .consent-inner { width:min(1040px, 100% - 80px); } }
@media (prefers-reduced-motion: no-preference) {
  .consent:not([hidden]) { animation:consent-in 200ms ease-out; }
  @keyframes consent-in { from { transform:translateY(100%); } to { transform:none; } }
}
@media print { .consent, .consent-link { display:none; } }