/* AK86 2026 – Cookiebar „Unsere Kekse sind eckig.“ (inc/kekse.php, kekse.js; Alex 11.11.2026).
   Unten links, Glas wie die Kacheln im Header, eckig. Die drei Knöpfe sind die runden .rb des Themes, etwas kleiner. */

.kx { position: fixed; z-index: 70; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 22px 22px 16px; color: var(--textcolor);
  background: rgba(var(--bgcolor-rgb), .62); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.kx[hidden] { display: none !important; }
.kx.weg { opacity: 0; transform: translateY(24px); pointer-events: none; }
body.mnu-in .kx, body.kov-in .kx, html.lb-open .kx, body.mnu-in .kx-dose, body.kov-in .kx-dose { opacity: 0; pointer-events: none; }

.kx-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.kx-kick { font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--static-seccolor, #50BBB8); }
html.lightmode .kx-kick { color: #1d7f7c; }
.kx-titel { margin: 6px 0 0; font: 900 30px/.95 var(--f-ext); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.kx-keks { width: 88px; height: 88px; display: block; }
.kx-text { margin: 14px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.5; color: rgba(var(--gridcolor-rgb), .78); }
.kx-text strong { color: var(--textcolor); font-weight: 600; }

/* Auswahl je Sorte */
.kx-sorten { display: none; gap: 8px; margin-top: 16px; }
.kx.auswahl .kx-sorten { display: grid; }
.kx-sorte { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); background: rgba(var(--bgcolor-rgb), .25); }
.kx-mini { width: 52px; height: 52px; cursor: pointer; transition: transform .4s cubic-bezier(.3,1.5,.5,1), opacity .3s, filter .3s; }
.kx-sorte[data-sorte="noetig"] .kx-mini { cursor: default; }
.kx-sorte[data-an="0"] .kx-mini { transform: scale(.72) rotate(-12deg); opacity: .45; filter: grayscale(1); }
.kx-sorte h3 { margin: 0; font: 700 16px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; }
.kx-sorte p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(var(--gridcolor-rgb), .72); }
.kx-sorte details { margin-top: 6px; font: 12px/1.5 var(--f-mono); color: rgba(var(--gridcolor-rgb), .72); }
.kx-sorte summary { cursor: pointer; color: var(--textcolor); }
.kx-sorte dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 0; }
.kx-sorte dt { color: var(--static-seccolor, #50BBB8); }
.kx-sorte dd { margin: 0; overflow-wrap: anywhere; }
.kx-sw { text-align: center; }
.kx-sw span { display: block; margin-top: 4px; font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb), .7); }
.kx-schalter { position: relative; width: 52px; height: 28px; padding: 0; cursor: pointer; border: 1px solid var(--line); background: rgba(var(--gridcolor-rgb), .08); }
.kx-schalter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: rgba(var(--gridcolor-rgb), .75); transition: transform .3s cubic-bezier(.3,1.4,.5,1), background .3s; }
.kx-schalter[aria-checked="true"] { background: rgba(80,187,184,.35); border-color: #50BBB8; }
.kx-schalter[aria-checked="true"]::after { transform: translateX(24px); background: #50BBB8; }
.kx-schalter:disabled { cursor: not-allowed; opacity: .6; }

/* Knöpfe: runde .rb des Themes, kleiner als im Footer */
.kx-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 6px -14px 0; }
.kx .rb { width: 122px; --bblur: 26px; }
.kx .rb span { font-size: 14px; }
.kx-ja { --bb2: #BA1424; --bb1: #50BBB8; }
.kx-nein { --bb2: #50BBB8; --bb1: #BA1424; }
html.lightmode .kx .rb, html.lightmode .kx .rb:hover { color: var(--textcolor); }
.kx-speichern { display: none !important; --bb2: #BA1424; --bb1: #50BBB8; }
.kx.auswahl .kx-speichern { display: inline-flex !important; }
.kx.auswahl .kx-selbst { display: none; }
.kx-selbst { margin-left: auto; margin-right: 14px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: var(--textcolor); font: 600 13px var(--f-mono); text-decoration: underline; text-underline-offset: 4px; }
.kx-recht { display: flex; gap: 16px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font: 12px var(--f-mono); }
.kx-recht a { color: rgba(var(--gridcolor-rgb), .72); }
.kx-recht a:hover { color: var(--textcolor); }

/* Keksdose unten links: öffnet die Einstellungen. Tritt zurück, solange der Footer unten im Bild ist (dort steht der Link „Cookie-Einstellungen“). */
.kx-dose { position: fixed; z-index: 69; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--textcolor);
  border: 1px solid var(--line); background: rgba(var(--bgcolor-rgb), .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.kx-dose[hidden] { display: none !important; }
.kx-dose.unten { opacity: 0; transform: translateY(12px); pointer-events: none; }
.kx-dose svg { width: 30px; height: 30px; overflow: visible; }
.kx-deckel { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.kx-dose:hover .kx-deckel, .kx-dose:focus-visible .kx-deckel { transform: rotate(-28deg) translateY(-2px); }
.kx-tipp { position: absolute; left: calc(100% + 10px); white-space: nowrap; padding: 5px 8px; font: 600 12px var(--f-mono); background: rgba(var(--bgcolor-rgb), .7); opacity: 0; transform: translateX(-4px); transition: .25s; pointer-events: none; }
.kx-dose:hover .kx-tipp, .kx-dose:focus-visible .kx-tipp { opacity: 1; transform: none; }

/* Link im Footer */
.foot-links .foot-kekse { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.foot-links .foot-kekse:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Krümel */
.kx-kruemel { position: fixed; z-index: 71; left: 0; top: 0; pointer-events: none; }

@media (max-width: 480px) {
  .kx { padding: 18px 16px 14px; }
  .kx-titel { font-size: 25px; }
  .kx-keks { width: 68px; height: 68px; }
  .kx .rb { width: 108px; }
  .kx .rb span { font-size: 13px; }
  .kx-selbst { margin-left: 14px; width: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .kx, .kx-dose, .kx-mini, .kx-deckel { transition: none; }
}
html.hi-ruhig .kx, html.hi-ruhig .kx-dose { transition: none; }