/* =========================================================================
   COOKIE-WAND — 1. FC Wilmersdorf 1911 e.V.
   Zustimmen und Ablehnen stehen gleichrangig nebeneinander, keine Vorauswahl.
   Der Tag Manager laedt immer, der Default steht auf denied (Consent Mode v2).
   ========================================================================= */
.kekse{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:clamp(14px,3vw,28px);
  background:rgba(0,20,46,.7); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
}
.kekse.zeig{opacity:1; visibility:visible}
body.kekse-offen{overflow:hidden}

.kekse__karte{
  width:min(100%,520px); max-height:calc(100dvh - 32px); overflow-y:auto;
  background:#fff; border-radius:10px;
  padding:clamp(24px,3vw,36px); text-align:center;
  box-shadow:0 2px 6px rgba(0,20,46,.06), 0 26px 70px rgba(0,20,46,.34);
  transform:translateY(14px) scale(.98); transition:transform .5s cubic-bezier(.22,1,.36,1);
  border-top:5px solid #D2003C;
}
.kekse.zeig .kekse__karte{transform:none}
.kekse__logo{width:auto; height:78px; margin:0 auto 20px; display:block}
.kekse__karte h2{
  font-size:clamp(1.2rem,2.2vw,1.44rem); font-weight:800; font-stretch:84%;
  line-height:1.12; letter-spacing:.01em; text-transform:uppercase;
  color:#001F47; margin:0 0 11px;
}
.kekse__karte > p{font-size:.88rem; line-height:1.62; color:#5A6A80; margin:0 0 22px}

.kekse__knoepfe{display:grid; gap:9px}
.kekse__knopf{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  min-height:52px; padding:14px 20px; border-radius:999px; font:inherit;
  font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; border:2px solid transparent; transition:all .22s ease; line-height:1.2;
}
.kekse__knopf--ja{background:#D2003C; color:#fff; border-color:#D2003C}
.kekse__knopf--ja:hover{background:#E8114E; border-color:#E8114E}
.kekse__knopf--nein{background:#fff; color:#001F47; border-color:rgba(0,31,71,.24)}
.kekse__knopf--nein:hover{background:#001F47; color:#fff; border-color:#001F47}
.kekse__knopf--mehr{min-height:42px; background:none; color:#5A6A80;
  font-size:.71rem; font-weight:700; letter-spacing:.11em; border-color:transparent}
.kekse__knopf--mehr:hover{color:#001F47}
.kekse__knopf:focus-visible{outline:3px solid #D2003C; outline-offset:3px}

@media (min-width:520px){
  .kekse__knoepfe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kekse__knopf--mehr{grid-column:1 / -1}
}

.kekse__panel{
  text-align:left; border-top:1px solid #E1E4EA; border-bottom:1px solid #E1E4EA;
  padding:16px 0; margin-bottom:18px; display:grid; gap:14px;
}
.kekse__panel[hidden]{display:none}
.kekse__zeile{display:flex; align-items:center; justify-content:space-between; gap:14px}
.kekse__zeile b{display:block; font-size:.87rem; color:#001F47; font-weight:800}
.kekse__zeile span{font-size:.77rem; color:#5A6A80; line-height:1.45}
.kekse__fest{font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8B99AC; white-space:nowrap; flex:none}

.schalter{display:flex; align-items:center; gap:8px; cursor:pointer; flex:none}
.schalter input{position:absolute; opacity:0; width:1px; height:1px}
.schalter__bahn{display:block; width:42px; height:24px; border-radius:100px;
  background:#E1E4EA; position:relative; transition:background .3s ease}
.schalter__punkt{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,20,46,.24);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.schalter input:checked + .schalter__bahn{background:#D2003C}
.schalter input:checked + .schalter__bahn .schalter__punkt{transform:translateX(18px)}
.schalter input:focus-visible + .schalter__bahn{outline:3px solid #D2003C; outline-offset:3px}
.schalter__text{font-size:.72rem; font-weight:700; color:#5A6A80; min-width:24px}

.kekse__links{margin:18px 0 0; font-size:.76rem; color:#8B99AC}
.kekse__links a{color:#5A6A80; text-decoration:underline; text-underline-offset:2px}
.kekse__links a:hover{color:#D2003C}

@media (prefers-reduced-motion:reduce){
  .kekse,.kekse__karte,.schalter__bahn,.schalter__punkt{transition:none}
  .kekse__karte{transform:none}
}