/* =========================================================
   LingoRhythm · Cookie-Banner (Complianz) · Mobile First
   Stand 27.10.2026 · Farben/Schrift nach 01-leitfaden-design
   Basis = Handy; ab 641 px schwebende Karte unten rechts.
   ========================================================= */

/* Farben und Complianz-Variablen */
body .cmplz-cookiebanner,
body #cmplz-manage-consent{
  --lr-ink:#201E1D; --lr-soft:#6B625B; --lr-muted:#766C64;
  --lr-paper:#FFFBF4; --lr-cream:#F5EAD8; --lr-sand:#EADFCB; --lr-sand2:#DCCBB0;
  --lr-terra:#C67139; --lr-terra-d:#A4572A; --lr-terra-t:#9C5126; --lr-tint:#F8E6D8;
  --lr-olive:#7A8A5E; --lr-olive-d:#5C6B43; --lr-peach:#F6A06B;
  --lr-cookie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E %3Cdefs%3E%3Cmask id='b'%3E%3Crect width='80' height='80' fill='%23fff'/%3E%3Ccircle cx='71' cy='13' r='11'/%3E%3Ccircle cx='59' cy='4' r='8'/%3E%3Ccircle cx='78' cy='28' r='8'/%3E%3C/mask%3E%3C/defs%3E %3Cg mask='url(%23b)'%3E%3Ccircle cx='38' cy='43' r='34' fill='%23C67139'/%3E%3Ccircle cx='38' cy='43' r='29.5' fill='%23F6A06B'/%3E %3Ccircle cx='31' cy='30' r='9' fill='%23FDEBDD' opacity='.55'/%3E%3C/g%3E %3Cg fill='%233A3431'%3E %3Cellipse cx='24' cy='41' rx='4.6' ry='3.4' transform='rotate(-22 24 41)'/%3E%3Crect x='27.4' y='26' width='2.2' height='15' rx='1.1'/%3E%3Cpath d='M29.4 26c4.4 1.4 6.6 4.2 5.4 8.6-1.1-2.7-2.8-3.9-5.4-4.4z'/%3E %3Cellipse cx='45' cy='59' rx='4.6' ry='3.4' transform='rotate(-22 45 59)'/%3E%3Crect x='48.4' y='44' width='2.2' height='15' rx='1.1'/%3E%3Crect x='48.4' y='44' width='9' height='2.4' rx='1.1'/%3E%3Crect x='57' y='44' width='2.2' height='12' rx='1.1'/%3E%3Cellipse cx='54' cy='56' rx='4.2' ry='3.1' transform='rotate(-22 54 56)'/%3E %3C/g%3E %3Cg fill='%23A4572A'%3E%3Ccircle cx='50' cy='33' r='2.6'/%3E%3Ccircle cx='20' cy='58' r='2.3'/%3E%3Ccircle cx='37' cy='19' r='2'/%3E%3Ccircle cx='31' cy='66' r='1.8'/%3E%3C/g%3E %3Cg fill='%23C67139'%3E%3Ccircle cx='74' cy='38' r='1.9'/%3E%3Ccircle cx='68' cy='31' r='1.3'/%3E%3Ccircle cx='76' cy='46' r='1.2'/%3E%3C/g%3E %3Cpath d='M38 9c3-5 9-6 12-4-3 4-8 6-12 4z' fill='%237A8A5E'/%3E %3C/svg%3E");
  --cmplz_banner_background_color:var(--lr-paper);
  --cmplz_banner_border_color:var(--lr-sand2);
  --cmplz_text_color:var(--lr-ink);
  --cmplz_hyperlink_color:var(--lr-terra-t);
  --cmplz_button_accept_background_color:var(--lr-terra-d);
  --cmplz_button_accept_border_color:var(--lr-terra-d);
  --cmplz_button_accept_text_color:#fff;
  --cmplz_button_deny_background_color:var(--lr-olive-d);
  --cmplz_button_deny_border_color:var(--lr-olive-d);
  --cmplz_button_deny_text_color:#fff;
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:var(--lr-sand2);
  --cmplz_button_settings_text_color:var(--lr-ink);
  --cmplz_category_header_always_active_color:var(--lr-olive-d);
  --cmplz_slider_active_color:var(--lr-olive-d);
  --cmplz_slider_inactive_color:var(--lr-sand2);
  --cmplz_slider_bullet_color:#fff;
}

/* ---------- Banner: Handy = Karte unten, volle Breite ---------- */
body .cmplz-cookiebanner.cmplz-cookiebanner{
  position:fixed !important;
  top:auto !important; left:8px !important; right:8px !important; bottom:8px !important;
  width:auto !important; max-width:none !important;
  max-height:calc(100dvh - 16px) !important;
  transform:none !important;
  margin:0 !important;
  padding:20px 18px 14px !important;
  gap:12px !important;
  border:2px solid var(--lr-sand) !important;
  border-radius:24px !important;
  background:
    linear-gradient(90deg,var(--lr-terra) 0 34%,var(--lr-olive) 34% 67%,var(--lr-peach) 67% 100%) top left / 100% 6px no-repeat,
    var(--lr-paper) !important;
  box-shadow:0 18px 40px -12px rgba(120,64,28,.35), 0 2px 0 rgba(255,255,255,.6) inset !important;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  color:var(--lr-ink) !important;
  z-index:2147483000 !important;
  overscroll-behavior:contain;
}
html[lang^="zh"] body .cmplz-cookiebanner,
html[lang^="zh"] body #cmplz-manage-consent{
  font-family:"Nunito","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif !important;
}

/* Kopf: Keks · Titel · Schliessen */
body .cmplz-cookiebanner .cmplz-header{
  grid-template-columns:56px 1fr 44px !important;
  gap:12px !important; align-items:center !important;
}
body .cmplz-cookiebanner .cmplz-logo{
  width:56px; height:56px; display:block !important;
  background:var(--lr-cookie) center / contain no-repeat;
  font-size:0;
}
body .cmplz-cookiebanner .cmplz-logo > *{display:none !important;}
body .cmplz-cookiebanner .cmplz-header .cmplz-title{
  display:block !important;
  justify-self:start !important; grid-column-start:2 !important;
  font-family:"Fraunces",Georgia,serif !important;
  font-weight:700 !important; font-size:20px !important; line-height:1.2 !important;
  color:var(--lr-terra-d) !important; margin:0 !important;
}
html[lang^="zh"] body .cmplz-cookiebanner .cmplz-header .cmplz-title{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif !important;
}
body .cmplz-cookiebanner .cmplz-close{
  width:44px !important; height:44px !important;
  display:grid !important; place-items:center !important;
  border-radius:50% !important; color:var(--lr-soft) !important;
  font-size:0 !important;
}
body .cmplz-cookiebanner .cmplz-close svg{width:16px !important; height:16px !important;}
body .cmplz-cookiebanner .cmplz-close:focus-visible{outline:3px solid var(--lr-peach); outline-offset:2px;}
@media (hover:hover){
  body .cmplz-cookiebanner .cmplz-close:hover{background:var(--lr-cream) !important; color:var(--lr-ink) !important;}
}

/* Trennlinien weg, Luft statt Striche */
body .cmplz-cookiebanner .cmplz-divider{display:none !important;}

/* Text */
body .cmplz-cookiebanner .cmplz-body{max-height:none !important; min-width:0 !important;}
body .cmplz-cookiebanner .cmplz-message{
  font-size:15px !important; line-height:1.55 !important;
  color:var(--lr-ink) !important; margin:0 !important;
}
body .cmplz-cookiebanner .cmplz-message p{margin:0 0 .5em !important;}
body .cmplz-cookiebanner .cmplz-message p:last-child{margin-bottom:0 !important;}
body .cmplz-cookiebanner .cmplz-message a,
body .cmplz-cookiebanner .cmplz-links .cmplz-link{
  color:var(--lr-terra-t) !important; text-decoration:underline !important;
  text-underline-offset:3px; text-decoration-thickness:1.5px;
}

/* Kategorien (nach "Einstellen") */
body .cmplz-cookiebanner .cmplz-categories{margin-top:14px;}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category{
  background:var(--lr-cream) !important;
  border:1px solid var(--lr-sand) !important;
  border-radius:16px !important;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child){margin-bottom:8px !important;}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header{
  grid-template-columns:1fr auto 32px !important;
  min-height:52px; padding:8px 12px 8px 16px !important;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title{
  font-weight:800 !important; font-size:15px !important; color:var(--lr-ink) !important;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active{
  font-size:13px !important; font-weight:800 !important; color:var(--lr-olive-d) !important;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle{
  width:32px; height:32px; border-radius:50% !important; color:var(--lr-terra-d) !important;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description{
  font-size:14px !important; line-height:1.5 !important; color:var(--lr-soft) !important;
  padding:0 16px 14px !important;
}
/* Handy: Kategorie-Kopf bleibt einzeilig (Complianz bricht sonst um) */
@media (max-width:425px){
  body .cmplz-cookiebanner .cmplz-category .cmplz-category-header{grid-template-columns:1fr auto 32px !important;}
}

/* Knoepfe: Handy untereinander, gleich gross, rund */
body .cmplz-cookiebanner .cmplz-buttons{
  display:flex !important; flex-direction:column !important; gap:10px !important;
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  min-height:48px !important; width:100% !important; padding:12px 18px !important;
  border-radius:999px !important; border-width:2px !important;
  font-family:inherit !important; font-weight:800 !important; font-size:16px !important;
  line-height:1.2 !important; white-space:normal !important;
  transition:background-color .2s ease, transform .2s ease;
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible{outline:3px solid var(--lr-peach) !important; outline-offset:2px;}
@media (hover:hover){
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover{background:#8E4A23 !important; border-color:#8E4A23 !important;}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover{background:#4C5A36 !important; border-color:#4C5A36 !important;}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover{background:var(--lr-cream) !important;}
}

/* Links zu Datenschutz / Impressum */
body .cmplz-cookiebanner .cmplz-links ul{flex-wrap:wrap !important; gap:4px 16px !important;}
body .cmplz-cookiebanner .cmplz-links .cmplz-link{
  display:inline-flex; align-items:center; min-height:36px;
  font-size:13px !important; color:var(--lr-muted) !important;
}

/* Sanftes Erscheinen + Keks wackelt einmal */
@keyframes lrCookieIn{from{opacity:0; translate:0 24px;}to{opacity:1; translate:0 0;}}
@keyframes lrCookieWiggle{0%,100%{rotate:0deg}25%{rotate:-10deg}55%{rotate:8deg}80%{rotate:-3deg}}
@media (prefers-reduced-motion:no-preference){
  body .cmplz-cookiebanner.cmplz-show{animation:lrCookieIn .45s cubic-bezier(.2,.8,.2,1) both;}
  body .cmplz-cookiebanner.cmplz-show .cmplz-logo{animation:lrCookieWiggle .9s ease-in-out .5s 1 both;}
}

/* ---------- Ab Tablet: schwebende Karte unten rechts ---------- */
@media (min-width:641px){
  body .cmplz-cookiebanner.cmplz-cookiebanner{
    left:auto !important; right:20px !important; bottom:20px !important;
    width:440px !important;
    padding:24px 24px 16px !important;
  }
  body .cmplz-cookiebanner .cmplz-buttons{flex-direction:row !important; flex-wrap:wrap !important;}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny{flex:1 1 40% !important; width:auto !important;}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{flex:1 1 100% !important;}
  body .cmplz-cookiebanner .cmplz-header .cmplz-title{font-size:22px !important;}
}
@media (min-width:961px){
  body .cmplz-cookiebanner.cmplz-cookiebanner{right:28px !important; bottom:28px !important; width:460px !important;}
}

/* ---------- Knopf "Zustimmung verwalten" (nach der Wahl) ----------
   Handy: runder Keks-Knopf unten rechts (Musik-Leiste sitzt links).
   Ab 961 px: Pille mit Text. Text bleibt fuer Screenreader lesbar. */
body #cmplz-manage-consent .cmplz-manage-consent{
  position:fixed !important; right:12px !important; left:auto !important;
  bottom:12px !important; top:auto !important;
  width:48px !important; min-width:48px !important; height:48px !important;
  padding:0 !important; margin:0 !important;
  border:2px solid var(--lr-sand2) !important; border-radius:999px !important;
  background:var(--lr-paper) var(--lr-cookie) center / 32px no-repeat !important;
  box-shadow:0 8px 20px -8px rgba(120,64,28,.45) !important;
  color:transparent !important; font-size:0 !important; overflow:hidden;
  animation:none !important; cursor:pointer; z-index:9998 !important;
}
body #cmplz-manage-consent .cmplz-manage-consent:focus-visible{outline:3px solid var(--lr-peach) !important; outline-offset:2px;}
@media (min-width:961px){
  body #cmplz-manage-consent .cmplz-manage-consent{
    right:20px !important; bottom:20px !important;
    width:auto !important; height:44px !important;
    padding:0 18px 0 46px !important;
    background:var(--lr-paper) var(--lr-cookie) 12px center / 26px no-repeat !important;
    color:var(--lr-ink) !important; font-family:"Nunito",system-ui,sans-serif !important;
    font-size:14px !important; font-weight:800 !important; line-height:40px !important;
  }
}
@media (hover:hover){
  body #cmplz-manage-consent .cmplz-manage-consent:hover{border-color:var(--lr-terra) !important;}
}
