/*!
 * cav-ui.css — global button mechanics + overlay/component behaviour styles.
 * Pairs with ui-anim.js (tags) and cav-overlays.js (overlays). Briefing §2.3.
 * Tokens come from the child theme :root (style.css).
 */

/* =====================================================================
   Unified button mechanic (§2.3) — applied to .ca-uibtn by ui-anim.js
   ===================================================================== */
.ca-uibtn{
  transition: transform .18s var(--cav-ease-bounce, cubic-bezier(.34,1.5,.5,1)),
              box-shadow .18s ease, background-color .18s ease, color .18s ease;
  will-change: transform;
}
.ca-uibtn:hover{ transform: translateY(-2px); }
.ca-uibtn:active{ transform: scale(.94); }
.ca-uibtn-ico:hover{ transform: translateY(-2px) scale(1.07); }
.ca-uibtn-ico:active{ transform: scale(.9); }
@media (prefers-reduced-motion: reduce){
  .ca-uibtn,.ca-uibtn:hover,.ca-uibtn:active,
  .ca-uibtn-ico:hover,.ca-uibtn-ico:active{ transform: none; transition: none; }
}

/* Cart badge pop (§2.3) */
@keyframes cav-pop{
  0%{ transform: scale(0); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}
.cav-pop{ animation: cav-pop .45s var(--cav-ease-bounce, cubic-bezier(.34,1.5,.5,1)) both; }

/* =====================================================================
   Generic pill / CTA helpers (used by header, cards, bands)
   ===================================================================== */
.cav-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--cav-font-body); font-weight:700; font-size:15px;
  line-height:1; text-decoration:none; cursor:pointer;
  padding:13px 22px; border-radius: var(--cav-radius-pill); border:0;
}
.cav-btn-navy{ background: var(--cav-navy); color:#fff; }
.cav-btn-navy:hover{ background: var(--cav-navy-hover); color:#fff; }
.cav-btn-ghost{ background:transparent; color: var(--cav-navy); box-shadow: inset 0 0 0 1.5px var(--cav-card-border); }
.cav-btn-ghost:hover{ background:#fff; }
.cav-btn-teal{ background: var(--cav-teal); color:#fff; }
.cav-btn-block{ width:100%; justify-content:center; }

/* Round icon button (header icons) */
.cav-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color: var(--cav-navy);
}
.cav-icon-btn svg{ width:21px; height:21px; }
.cav-icon-btn.is-cart{ background: var(--cav-navy); color:#fff; position:relative; }

/* Cart count badge (honey) */
.cav-cart-count{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px; background: var(--cav-honey);
  color: var(--cav-navy); font-family: var(--cav-font-head); font-weight:700;
  font-size:11px; line-height:19px; text-align:center;
}
.cav-cart-count[data-count="0"]{ display:none; }

/* =====================================================================
   Overlay / modal scaffold (search, auth, account, cart) — §2.1
   Behaviour toggled by cav-overlays.js via [hidden] + .is-open
   ===================================================================== */
.cav-overlay{
  position:fixed; inset:0; z-index:9000;
  display:flex; opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.cav-overlay.is-open{ opacity:1; visibility:visible; }
.cav-overlay__scrim{
  position:absolute; inset:0;
  background: rgba(42,58,82,.28);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}

/* --- Search overlay (top-aligned, Hafer tint — SiteNav.dc.html) --- */
.cav-search{ background: rgba(244,241,233,.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items:flex-start; overflow-y:auto; }
.cav-search__inner{ position:relative; margin:0 auto; width:100%; max-width:760px; padding:28px 20px 60px; }
.cav-search__top{ display:flex; align-items:center; gap:12px; }
.cav-search__bar{
  flex:1; display:flex; align-items:center; gap:12px; background:#fff;
  border-radius: 999px; padding:0 18px;
  box-shadow:0 18px 40px -24px rgba(42,58,82,0.4); border:1.5px solid rgba(140,136,130,0.3);
}
.cav-search__bar svg{ color: var(--cav-warm); }
.cav-search__bar input{ flex:1; border:0; outline:0; background:transparent; padding:18px 0; font-family: var(--cav-font-body); font-size:17px; color: var(--cav-ink); }
.cav-search__clear{ width:26px; height:26px; border:0; background: var(--cav-hafer); border-radius:50%; cursor:pointer; color: var(--cav-ink-2); display:flex; align-items:center; justify-content:center; flex:none; }
.cav-search__close{ flex:none; background:#fff; border:1px solid rgba(140,136,130,0.25); width:54px; height:54px; border-radius:50%; cursor:pointer; color: var(--cav-navy); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 40px -24px rgba(42,58,82,0.4); }
.cav-search__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; align-items:center; }
.cav-search__chiplabel{ font-size:13px; font-weight:800; color: var(--cav-warm); }
.cav-chip{ background:#fff; border:1px solid rgba(140,136,130,0.3); color: var(--cav-ink-2); border-radius:999px; padding:8px 15px; font-weight:700; font-size:13.5px; cursor:pointer; }
.cav-chip:hover{ background: var(--cav-hafer-2); color: var(--cav-navy); }
.cav-search__count{ font-size:13px; font-weight:700; color: var(--cav-warm); margin:24px 0 12px; }
.cav-search__results{ display:flex; flex-direction:column; gap:8px; }
.cav-search__row{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid rgba(140,136,130,0.16); border-radius:14px; padding:12px 14px; text-decoration:none; color: var(--cav-ink); }
.cav-search__row:hover{ box-shadow: var(--cav-shadow-card); }
.cav-search__row img{ width:44px; height:58px; object-fit:cover; border-radius:8px; background:#EDE8DD; flex:none; }
.cav-search__row .t{ display:block; font-family: var(--cav-font-head); font-weight:600; font-size:16px; color: var(--cav-navy); }
.cav-search__row .c{ display:block; font-size:13px; color: var(--cav-warm); margin-top:2px; }
.cav-search__row .info{ flex:1; min-width:0; }
.cav-search__row .p{ flex:none; font-family: var(--cav-font-head); font-weight:600; font-size:16px; color: var(--cav-navy); }
.cav-search__empty{ text-align:center; color: var(--cav-ink-2); padding:40px 20px; }
.cav-search__empty strong{ display:block; font-family: var(--cav-font-head); font-weight:600; font-size:20px; color: var(--cav-navy); }

/* --- Cart slide-out (right panel) — exact per SiteNav.dc.html --- */
.cav-cart{ justify-content:flex-end; }
.cav-cart__panel{
  position:relative; width:min(420px,92vw); height:100%; background: var(--cav-hafer);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,.8,.3,1);
  box-shadow: -24px 0 60px -20px rgba(42,58,82,.5);
}
.cav-overlay.is-open .cav-cart__panel{ transform: translateX(0); }
.cav-cart__head{ display:flex; align-items:center; gap:10px; padding:22px 22px 16px; color: var(--cav-navy); }
.cav-cart__head h3{ margin:0; font-family: var(--cav-font-head); font-weight:600; font-size:20px; color: var(--cav-navy); }
.cav-cart__head .cav-cart-count{ position:static; background: var(--cav-navy); color:#fff; border:0; min-width:22px; height:22px; }
.cav-cart__body{ flex:1; overflow:auto; padding:4px 22px; }

.cav-cartitem{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid rgba(140,136,130,0.16); border-radius:14px; padding:11px 12px; margin-bottom:10px; }
.cav-cartitem__img{ width:46px; height:60px; object-fit:cover; border-radius:8px; flex:none; background:#EDE8DD; }
.cav-cartitem__info{ flex:1; min-width:0; }
.cav-cartitem__title{ font-family: var(--cav-font-head); font-weight:600; font-size:15.5px; color: var(--cav-navy); line-height:1.15; text-decoration:none; display:block; }
.cav-cartitem__pdf{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:11.5px; font-weight:800; color: var(--cav-teal); background:rgba(46,139,134,0.12); padding:3px 9px; border-radius:999px; }
.cav-cartitem__end{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cav-cartitem__price{ font-family: var(--cav-font-head); font-weight:600; font-size:16px; color: var(--cav-navy); }
.cav-cartitem__remove{ background: var(--cav-hafer); border:0; cursor:pointer; width:28px; height:28px; border-radius:50%; color: var(--cav-warm); display:flex; align-items:center; justify-content:center; text-decoration:none; }
.cav-cartitem__remove:hover{ color: var(--cav-berry); }

.cav-cart__foot{ padding:18px 22px 22px; background:#fff; border-top:1px solid rgba(140,136,130,0.18); }
.cav-cart__foot.is-empty{ display:none; }
.cav-cart__subline{ display:flex; justify-content:space-between; align-items:baseline; }
.cav-cart__subline span:first-child{ font-weight:800; font-size:16px; color: var(--cav-navy); }
.cav-cart__subtotal{ font-family: var(--cav-font-head); font-weight:600; font-size:24px; color: var(--cav-navy); }
.cav-cart__meta{ display:flex; justify-content:space-between; font-size:12.5px; color: var(--cav-warm); margin-top:4px; }
.cav-cart__continue{ margin-top:10px; width:100%; background:none; border:0; cursor:pointer; font-weight:800; font-size:14px; color: var(--cav-ink-2); padding:6px; }
.cav-cart__continue:hover{ color: var(--cav-navy); }

.cav-cart__empty{ text-align:center; padding:60px 20px; }
.cav-cart__empty-ic{ width:64px; height:64px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color: var(--cav-warm-light); }
.cav-cart__empty-t{ font-family: var(--cav-font-head); font-weight:600; font-size:19px; color: var(--cav-navy); }
.cav-cart__empty p{ font-size:14.5px; color: var(--cav-ink-2); margin:6px 0 20px; }

/* --- Centered modal (auth) — exact per SiteNav.dc.html --- */
.cav-modal{ align-items:center; justify-content:center; background: rgba(42,58,82,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:20px; overflow-y:auto; }
.cav-modal .cav-overlay__scrim{ background:transparent; backdrop-filter:none; }
.cav-modal__box{
  position:relative; width:100%; max-width:440px; background:#fff; border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(42,58,82,0.6); overflow:hidden;
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.4,.8,.3,1);
}
.cav-overlay.is-open .cav-modal__box{ transform:none; }
.cav-modal__close{ position:absolute; top:18px; right:18px; background: var(--cav-hafer); border:0; width:38px; height:38px; border-radius:50%; cursor:pointer; color: var(--cav-ink-2); display:flex; align-items:center; justify-content:center; z-index:2; }
.cav-modal__head{ position:relative; padding:26px 26px 0; }
.cav-modal__logo{ width:54px; height:54px; display:block; }
.cav-modal__head h2{ font-family: var(--cav-font-head); font-weight:600; font-size:26px; color: var(--cav-navy); margin:14px 0 4px; }
.cav-modal__head p{ font-size:14.5px; color: var(--cav-ink-2); margin:0; }
.cav-modal__body{ padding:22px 26px 26px; }
.cav-seg{ display:flex; background: var(--cav-hafer); border-radius:13px; padding:5px; margin:20px 26px 0; }
.cav-seg button{ flex:1; border:0; background:transparent; padding:10px; border-radius:9px; font-weight:800; cursor:pointer; color: var(--cav-ink-2); }
.cav-seg button.is-active{ background:#fff; color: var(--cav-navy); box-shadow: var(--cav-shadow-card); }
.cav-flabel{ display:block; font-size:13px; font-weight:800; color: var(--cav-navy); margin-bottom:6px; }
.cav-ifield{ display:flex; align-items:center; gap:10px; background: var(--cav-hafer-2); border:1.5px solid rgba(140,136,130,0.25); border-radius:12px; padding:0 14px; margin-bottom:14px; }
.cav-ifield input{ flex:1; border:0; background:none; outline:0; padding:13px 0; font-family: var(--cav-font-body); font-size:15px; color: var(--cav-ink); }
.cav-forgot{ text-align:right; margin:-6px 0 16px; }
.cav-forgot a{ font-size:13px; font-weight:700; color: var(--cav-ink-2); text-decoration:underline; }
.cav-check{ display:flex; align-items:flex-start; gap:9px; margin:12px 0 8px; cursor:pointer; font-size:12.5px; color: var(--cav-ink-2); line-height:1.5; }
.cav-check input{ margin-top:2px; width:16px; height:16px; accent-color: var(--cav-navy); flex:none; }
.cav-check a{ color: var(--cav-navy); font-weight:700; text-decoration:underline; }
.cav-or{ display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12px; font-weight:700; color: var(--cav-warm); }
.cav-or span{ flex:1; height:1px; background: rgba(140,136,130,0.25); }
.cav-guest{ display:block; text-align:center; font-weight:700; font-size:14px; color: var(--cav-ink-2); }
.cav-guest:hover{ color: var(--cav-navy); }

/* --- Account dropdown (speech-bubble from icon) --- */
.cav-account{
  position:absolute; z-index:9100; width:280px; background:#fff;
  border-radius:18px; box-shadow: var(--cav-shadow-band); border:1px solid var(--cav-card-border);
  overflow:hidden; transform-origin: top right;
  opacity:0; visibility:hidden; transform: scale(.92) translateY(-6px);
  transition: opacity .2s ease, transform .2s var(--cav-ease-bounce, cubic-bezier(.34,1.5,.5,1)), visibility .2s;
}
.cav-account.is-open{ opacity:1; visibility:visible; transform:none; }
.cav-account__head{ background: var(--cav-navy); color:#fff; padding:16px; display:flex; gap:12px; align-items:center; }
.cav-account__avatar{ width:42px; height:42px; border-radius:50%; background: var(--cav-honey); color: var(--cav-navy); display:flex; align-items:center; justify-content:center; font-family: var(--cav-font-head); font-weight:700; }
.cav-account__row{ display:flex; align-items:center; gap:11px; padding:12px 16px; text-decoration:none; color: var(--cav-ink); }
.cav-account__row:hover{ background: var(--cav-hafer); }
.cav-account__row.is-logout{ color: var(--cav-berry); border-top:1px solid var(--cav-card-border); }
.cav-account__badge{ margin-left:auto; background: var(--cav-teal); color:#fff; border-radius:999px; font-size:12px; padding:1px 8px; font-weight:700; }

.cav-overlay__close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color: var(--cav-navy); box-shadow: var(--cav-shadow-card);
  display:flex; align-items:center; justify-content:center;
}

body.cav-noscroll{ overflow:hidden; }

/* draw-motif: the source SVG uses ~4px strokes on a 2481px viewBox, which
   become sub-pixel when scaled into the small box → invisible. Boost so the
   line art is clearly visible. */
draw-motif svg path,
draw-motif svg line,
draw-motif svg polyline{ stroke-width: 14px !important; }

/* Gratis-Motiv band (§6.9) responsive collapse */
@media (max-width:760px){ .ca-gm{ grid-template-columns:1fr !important; padding:28px 22px !important; } }

/* Magazin (blog index) — card hover + responsive grids (magazin.dc.html) */
.ca-post{ transition: transform .15s ease; }
.ca-post:hover{ transform: translateY(-4px); }
@media (max-width:980px){ .ca-grid3{ grid-template-columns:repeat(2,1fr) !important; } .ca-feat{ grid-template-columns:1fr !important; } }
@media (max-width:620px){ .ca-grid3{ grid-template-columns:1fr !important; } }

/* draw-motif: the SVG line art is authored on a 2481px viewBox; scaled into the
   small "So entsteht ein Motiv" box its 4px strokes become sub-pixel/invisible.
   Thicken so the motif reads clearly while it's "drawn". */
draw-motif svg path{ stroke-width: 9px !important; }

/* Cookie consent banner (§8) */
.cav-consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9500;
  max-width:760px; margin-inline:auto; display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--cav-card-border); border-radius:16px;
  box-shadow: var(--cav-shadow-band); padding:14px 18px;
}
.cav-consent-banner p{ margin:0; font-size:13.5px; color: var(--cav-ink-2); flex:1; }
.cav-consent-banner a{ color: var(--cav-navy); }
@media (max-width:560px){ .cav-consent-banner{ flex-direction:column; align-items:stretch; text-align:center; } }