/* Consent gate styles — standalone, for pages that do not load v2.css */
/* ═══════════════════════════════════════════════════════════════
   Consent gate (assets/consent.js)
   ═══════════════════════════════════════════════════════════════ */
/* Two shapes, one component.
   .ck--bar   first run: a bar pinned to the bottom. No backdrop, nothing
              blocked — a visitor arriving from an ad can read the offer
              and scroll before deciding. Consent is still required before
              a single tag loads; blocking the page was never what made
              that lawful, it just cost us the visitors who bounce off a
              wall from a brand they have never heard of.
   .ck--modal settings: a real dialog, backdrop and all, because opening
              it is a deliberate act. */
.ck{position:fixed;z-index:2400}
.ck--bar{
  left:0;right:0;bottom:0;top:auto;
  display:flex;justify-content:flex-start;padding:16px 24px 20px;
  pointer-events:none;          /* the page behind stays usable */
}
.ck--bar .ck-card{pointer-events:auto}
.ck--modal{
  inset:0;display:grid;place-items:end start;padding:24px;
  background:rgba(36,16,25,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* The bar has to stay a bar. At the card's full size it was 435px tall and
   still swallowed the bottom half of a 390x844 phone, which is most of the
   problem it was meant to solve. Tighter type, tighter padding, buttons on
   one row. The settings modal keeps the roomy treatment. */
.ck--bar .ck-card{padding:16px 20px 14px;max-width:520px;box-shadow:0 -10px 34px rgba(36,16,25,.26)}
.ck--bar .ck-card h2{font-size:1.0625rem;line-height:1.25;margin-bottom:5px}
.ck--bar .ck-body{font-size:.875rem;line-height:1.45;margin:0 0 13px}
.ck--bar .ck-acts{gap:8px}
.ck--bar .ck-acts .btn{flex:1 1 auto;padding:10px 14px;font-size:.9375rem;min-width:0}
/* Three equal buttons never fit a phone in German: "Einstellungen" dropped to
   a row of its own and made the bar look broken. The two real choices share
   one row; settings is a secondary action and reads as a link, next to the
   privacy links it belongs with. */
.ck--bar .ck-acts{flex-wrap:wrap;align-items:stretch;gap:8px 10px}
.ck--bar .ck-acts .btn{flex:1 1 0;min-width:0;white-space:nowrap}
/* settings now lives in the links row; match the anchors exactly */
.ck-links .ck-set{
  background:none;border:0;box-shadow:none;padding:0;min-height:24px;
  font:inherit;font-size:.875rem;color:#6b5560;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;
}
.ck-links .ck-set:hover{color:var(--ink,#241019)}
.ck--bar .ck-links{margin:11px 0 0;font-size:.8125rem;gap:14px}
@media (max-width:560px){
  .ck--bar .ck-card{
    border-radius:var(--r-mid,28px) var(--r-mid,28px) 0 0;
    padding:15px 18px calc(13px + env(safe-area-inset-bottom,0px));
  }
  /* override the stacked full-width buttons from the modal treatment */
  .ck--bar .ck-acts .btn{flex:1 1 auto}
  .ck--bar .ck-acts .btn:last-child{flex:0 0 auto}
}

.ck-card{
  width:100%;max-width:460px;background:var(--bone,#EDECE2);color:var(--ink,#241019);
  border-radius:var(--r-mid,40px) var(--r-nub,12px) var(--r-mid,40px) var(--r-nub,12px);
  padding:30px 32px 26px;box-shadow:0 26px 60px rgba(36,16,25,.34);
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.ck-card h2{font-size:1.35rem;line-height:1.2;margin-bottom:12px}
.ck-body{font-size:1rem;color:#5d4751;margin:0 0 22px}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px}
.ck-acts .btn{flex:1 1 auto;justify-content:center;padding:13px 20px;font-size:1rem}
.ck-links{display:flex;gap:18px;margin:18px 0 0;font-size:.875rem}
.ck-links a{color:#6b5560;text-decoration:underline;text-underline-offset:3px;min-height:24px;display:inline-flex;align-items:center}
.ck-links a:hover{color:var(--ink,#241019)}
.ck-rows{display:grid;gap:18px;margin-bottom:22px}
.ck-row p{margin:6px 0 0 54px;font-size:.9375rem;color:#5d4751;line-height:1.45}
.ck-sw{display:flex;align-items:center;gap:14px;cursor:pointer}
.ck-sw input{position:absolute;opacity:0;width:0;height:0}
.ck-track{
  width:40px;height:24px;border-radius:999px;background:var(--bone-deep,#E2E0D2);
  position:relative;flex:none;transition:background .18s ease;
}
.ck-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .18s ease}
.ck-sw input:checked + .ck-track{background:var(--wa,#0B7A43)}
.ck-sw input:checked + .ck-track::after{transform:translateX(16px)}
.ck-sw input:disabled + .ck-track{background:var(--flare,#EE6D4D);opacity:.55}
.ck-sw input:focus-visible + .ck-track{outline:3px solid var(--indigo,#4B5BA6);outline-offset:3px}
.ck-name{font-family:var(--display,'Outfit',system-ui,sans-serif);font-weight:600;font-size:1.0625rem}
.ck-name em{font-style:normal;font-weight:500;font-size:.875rem;color:#6b5560}
@media (max-width:560px){
  .ck--modal{place-items:end center;padding:0}
  .ck--bar{padding:0}
  .ck-card{max-width:none;border-radius:var(--r-mid,40px) var(--r-mid,40px) 0 0;padding:26px 22px 22px}
  .ck-acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.ck-track,.ck-track::after{transition:none}}
.ck .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display,'Outfit',system-ui,sans-serif);
  font-weight:600;font-size:1rem;padding:13px 22px;border-radius:999px;cursor:pointer;border:0;
  background:var(--flare,#EE6D4D);color:var(--ink,#241019);text-decoration:none;transition:background .18s ease}
.ck .btn:hover{background:#E25B38}
.ck .btn--line{background:transparent;color:var(--ink,#241019);border:1.5px solid rgba(36,16,25,.3)}
.ck .btn--line:hover{background:var(--ink,#241019);color:#fff}