/* Fitnesslab Bülach — Datenschutz-Banner (unten links, Milchglas), gehört zu assets/js/consent.js.
   Eigene Datei mit eigenen Werten, damit der Banner auch auf Seiten ohne style.css gleich aussieht.
   pointer-events:none ist PFLICHT: das Panel bleibt bei visibility:hidden im Layout (auf dem Handy
   fast bildschirmbreit) und würde sonst Taps darunter abfangen. */
.flc{--flc-green:#b8e600;--flc-green-hi:#ceff00;--flc-on-green:#0b0d00;
  position:fixed;left:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  pointer-events:none}
.flc__btn,.flc__panel.is-open{pointer-events:auto}
.flc__btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(184,230,0,.5);
  background:rgba(12,12,12,.66);-webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);box-shadow:0 6px 24px rgba(0,0,0,.45);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.flc__btn:hover,.flc__btn[aria-expanded="true"]{transform:translateY(-2px);border-color:var(--flc-green);
  background:rgba(12,12,12,.85);box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 18px rgba(184,230,0,.25)}
.flc__btn svg{width:24px;height:24px;stroke:var(--flc-green);fill:none}
.flc__btn:focus-visible{outline:2px solid var(--flc-green);outline-offset:3px}

.flc__panel{width:min(360px,calc(100vw - 40px));max-height:calc(100dvh - 120px);overflow:auto;
  padding:20px 20px 16px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(18,18,18,.82);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 50px rgba(0,0,0,.55);color:#f3f3f1;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:bottom left;
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.flc__panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.flc__view[hidden]{display:none}
.flc__title{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;
  font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--flc-green);
  margin:0 0 8px;padding-left:12px;border-left:2px solid var(--flc-green);line-height:1.1}
.flc__text{font-size:14.5px;line-height:1.55;color:rgba(243,243,241,.84);margin:0 0 16px;max-width:none}

.flc__actions{display:flex;gap:10px;margin-bottom:12px}
.flc__actions button{flex:1;min-height:44px;padding:10px 12px;border-radius:4px;cursor:pointer;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.1;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.flc__more,.flc__save{border:0;background:transparent;color:var(--flc-green);
  box-shadow:inset 0 0 0 1.5px var(--flc-green)}
.flc__more:hover,.flc__save:hover{background:rgba(184,230,0,.1);color:var(--flc-green-hi);
  box-shadow:inset 0 0 0 1.5px var(--flc-green-hi)}
.flc__accept{border:0;background:var(--flc-green);color:var(--flc-on-green)}
.flc__accept:hover{background:var(--flc-green-hi)}
.flc__actions button:focus-visible{outline:2px solid var(--flc-green);outline-offset:2px}

.flc__list{list-style:none;margin:4px 0 16px;padding:0}
.flc__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}
.flc__row:first-child{border-top:0}
.flc__name{display:block;font-weight:600;font-size:15px;color:#f3f3f1}
.flc__hint{display:block;font-size:13px;line-height:1.4;color:#a6a6a2;margin-top:2px}
.flc__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Schalter */
.flc__tgl{position:relative;flex:none;width:44px;height:26px;cursor:pointer}
.flc__tgl input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.flc__tgl span[aria-hidden]{position:absolute;inset:0;border-radius:999px;background:#3a3a3a;
  transition:background .18s ease}
.flc__tgl span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#d6d6d2;transition:transform .18s ease,background .18s ease}
.flc__tgl input:checked+span{background:var(--flc-green)}
.flc__tgl input:checked+span::after{transform:translateX(18px);background:var(--flc-on-green)}
.flc__tgl input:focus-visible+span{outline:2px solid var(--flc-green);outline-offset:2px}
.flc__tgl.is-fix{cursor:default;opacity:.55}
.flc__tgl.is-fix input{cursor:default}

.flc__link{display:inline-block;font-size:13px;color:rgba(243,243,241,.55);text-decoration:underline}
.flc__link:hover{color:var(--flc-green)}

/* Das GHL-Chat-Widget hängt mit riesigem z-index über allem und verdeckt auf dem Handy die
   Knöpfe. Solange die Datenschutz-Wahl offen ist, hat sie Vorrang. */
html.flc-open chat-widget{visibility:hidden}

@media (max-width:600px){
  .flc{left:14px;bottom:14px}
  .flc__btn{width:44px;height:44px}
  .flc__panel{width:calc(100vw - 28px)}
}
@media (max-width:360px){
  .flc__actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .flc__panel,.flc__btn,.flc__tgl span{transition:none}
}