/* ---- cookie consent ---- */
/* Contained floating card (bottom-left) rather than a full-width bar, so it reads as
   part of the site's premium, editorial aesthetic: sharp corners, thin teal accent,
   self-hosted type. Shared across index / impressum / datenschutz. */
#consent-banner{
  position:fixed; left:24px; bottom:24px; z-index:200;
  width:min(400px, calc(100vw - 48px));
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,0.14);
  border-top:3px solid #32CBC2;
  box-shadow:0 16px 44px rgba(0,0,0,0.16);
  padding:22px 24px 20px;
  display:none;
}
#consent-banner.show{display:block; animation:consentIn .4s cubic-bezier(.22,.61,.36,1)}
@keyframes consentIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ #consent-banner.show{animation:none} }

.consent-inner{display:block}
.consent-inner::before{
  content:'Cookies';
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:#000000; opacity:.5;
  margin-bottom:10px;
}
.consent-text{font-size:13px; line-height:1.6; opacity:.8; margin:0 0 18px}
.consent-text a{text-decoration:underline; text-underline-offset:2px; color:inherit}

.consent-actions{display:flex; flex-direction:column-reverse; gap:9px}
.consent-btn{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; font-weight:600;
  padding:13px 18px; border:1px solid #000000; cursor:pointer;
  background:#FFFFFF; color:#000000; width:100%; text-align:center;
  transition:background .15s, color .15s, filter .15s;
}
.consent-btn.primary{background:#32CBC2; border-color:#32CBC2}
.consent-btn.primary:hover{filter:brightness(0.94)}
.consent-btn[data-consent-reject]:hover{background:#000000; color:#FFFFFF}
/* "Einstellungen" is the quieter, tertiary option — a text link, not a full button */
.consent-btn[data-consent-settings]{
  border:0; padding:4px; width:auto; align-self:center;
  font-size:11px; letter-spacing:0.1em; opacity:.6;
  text-decoration:underline; text-underline-offset:2px; background:none;
}
.consent-btn[data-consent-settings]:hover{opacity:1}

/* ---- settings modal ---- */
#consent-modal{position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); padding:20px}
#consent-modal.show{display:flex}
.consent-panel{
  background:#FFFFFF; max-width:540px; width:100%; max-height:86vh; overflow:auto;
  padding:32px; position:relative;
  border-top:3px solid #32CBC2;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
}
.consent-panel-close{position:absolute; top:16px; right:16px; background:none; border:0; font-size:24px; line-height:1; cursor:pointer; padding:4px; opacity:.6}
.consent-panel-close:hover{opacity:1}
.consent-panel h2{font-family:'Archivo Black',sans-serif; font-weight:400; text-transform:uppercase; font-size:22px; letter-spacing:-0.01em; margin:0 0 6px; padding-right:28px}
.consent-panel > p{font-size:13px; line-height:1.55; opacity:.75; margin:0 0 8px}
.consent-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 0; border-top:1px solid rgba(0,0,0,0.12)}
.consent-row:last-of-type{border-bottom:1px solid rgba(0,0,0,0.12)}
.consent-row h3{font-size:14px; font-weight:700; margin:0 0 4px}
.consent-row p{font-size:12px; line-height:1.5; opacity:.65; margin:0; max-width:38ch}
.consent-toggle{position:relative; flex:none; width:42px; height:24px; display:block}
.consent-toggle input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.consent-toggle .track{position:absolute; inset:0; background:rgba(0,0,0,0.2); border-radius:999px; transition:background .15s}
.consent-toggle .knob{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#FFFFFF; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.consent-toggle input:checked + .track{background:#32CBC2}
.consent-toggle input:checked + .track .knob{transform:translateX(18px)}
.consent-toggle input:disabled + .track{opacity:.55; cursor:not-allowed}
.consent-toggle input:focus-visible + .track{outline:2px solid #32CBC2; outline-offset:2px}
.consent-panel-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.consent-panel-actions .consent-btn{width:auto}
.consent-link-btn{background:none; border:0; padding:0; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; color:inherit}
