/* ===== Matawow Cookie Banner – Single Source of Truth ===== */

.cc-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:9998;
}

.cc-backdrop.show{display:flex}

.cc-banner{
  width:min(980px,96vw);
  margin:32px 16px 56px;
  color:#eaf0f8;
  background:#0b0f18;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:18px;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.cc-title{
  font:800 22px/1.2 Poppins,system-ui,sans-serif;
  margin:0 0 6px;
}

.cc-text{
  color:#cfd6e2;
  line-height:1.55;
  margin:0 0 10px;
}

.cc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cc-link{
  color:#9ad1ff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cc-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}

.cc-btn.primary{
  background:#22c55e;
  border:none;
  color:#061117;
}

.cc-btn.danger{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
}

.cc-settings{
  margin-top:10px;
  border-top:1px dashed rgba(255,255,255,.2);
  padding-top:12px;
  display:none;
}

.cc-settings.show{display:block}

.cc-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:14px 16px;
  margin-bottom:10px;

  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;

  background:rgba(255,255,255,.02);

  transition:
    background .18s ease,
    border-color .18s ease;
}
.cc-toggle:hover{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
}
.cc-toggle:last-child{
  margin-bottom:0;
}

.cc-switch{
  flex-shrink:0;
  margin-left:18px;

  display:flex;
  align-items:center;
}

.cc-toggle > div:first-child{
  flex:1;
  min-width:0;
}

.cc-backdrop .cc-switch input{
  width:48px !important;
  height:26px !important;
  min-width:48px !important;
  min-height:26px !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  accent-color:initial !important;
  filter:none !important;

  background:#2b3244;
  border-radius:999px;
  position:relative;
  outline:0;
  cursor:pointer;
}

.cc-backdrop .cc-switch input:before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  transition:.18s ease;
}

.cc-backdrop .cc-switch input:checked{
  background:#22c55e;
}

.cc-backdrop .cc-switch input:checked:before{
  transform:translateX(22px);
}

/* Badge Default: kein Consent */
.cc-badge{
  position:fixed;
  left:14px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(32,41,64,.92);
  backdrop-filter:blur(8px);
  color:#fff;
  font-weight:600;
  font-size:12px;
  z-index:9997;
  cursor:pointer;
  box-shadow:
    0 10px 30px rgba(0,0,0,.65),
    0 0 0 1px rgba(15,23,42,.9);
  transition:
    opacity .25s,
    transform .25s,
    box-shadow .25s,
    background .25s,
    bottom .25s,
    left .25s;
}

/* Nach Consent: dezent vertikal */
.cc-badge.vertical{
  opacity:.34;
  background:rgba(23,30,48,.9);
  left:6px;
  bottom:50%;
  transform:translateY(50%) scale(.86);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  padding:9px 5px;
  border-radius:12px;
}

.cc-badge:hover{
  opacity:.92;
}

/* Kleine Laptops / enge Viewports */
@media (max-width:1280px){
  .cc-badge{
    font-size:11px;
    padding:6px 11px;
  }

  .cc-badge.vertical{
    left:2px;
    padding:8px 4px;
    font-size:10px;
    opacity:.24;
    transform:translateY(50%) scale(.8);
  }
}

/* Mobile */
@media (max-width:768px){
  .cc-banner{
    margin:16px 10px 24px;
    padding:16px;
  }

  .cc-title{
    font-size:20px;
  }

  .cc-actions{
    gap:8px;
  }

  .cc-btn{
    padding:9px 11px;
    font-size:13px;
  }

  .cc-badge.vertical{
    left:-2px;
    padding:7px 3px;
    font-size:9px;
    opacity:.18;
    transform:translateY(50%) scale(.72);
    letter-spacing:.02em;
  }
}
/* =========================================================
   PATCH – Cookie Banner Small Devices (iPhone SE + Android)
   ========================================================= */

@media (max-width:430px){

  .cc-backdrop{
    align-items:flex-end;
    padding:
      8px
      8px
      calc(8px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
  }

  .cc-banner{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
    margin:0;
    padding:14px 14px;
    border-radius:18px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .cc-title{
    margin-bottom:6px;
    font-size:18px;
    line-height:1.15;
  }

  .cc-text{
    margin-bottom:10px;
    font-size:13px;
    line-height:1.45;
  }

  .cc-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .cc-btn{
    width:100%;
    min-height:40px;
    padding:8px 10px;
    font-size:12px;
    line-height:1.2;
    white-space:normal;
  }

  .cc-btn.primary{
    grid-column:1 / -1;
  }

  .cc-settings{
    margin-top:10px;
    padding-top:10px;
  }

  .cc-toggle{
    gap:10px;
    margin-bottom:8px;
    padding:10px;
    border-radius:14px;
  }

  .cc-toggle > div:first-child{
    font-size:12px;
    line-height:1.4;
  }

  .cc-switch{
    margin-left:8px;
  }

  .cc-switch input{
    width:44px;
    min-width:44px;
    height:24px;
    min-height:24px;
  }

  .cc-switch input:before{
    width:18px;
    height:18px;
  }

  .cc-switch input:checked:before{
    transform:translateX(20px);
  }
}

/* =========================================================
   Extra niedrige Displays (iPhone SE, Galaxy S8, usw.)
   ========================================================= */

@media (max-width:430px) and (max-height:760px){

  .cc-backdrop{
    align-items:flex-end;
  }

  .cc-banner{
    max-height:calc(100dvh - 10px);
    padding:12px;
  }

  .cc-title{
    font-size:17px;
  }

  .cc-text{
    font-size:12px;
    line-height:1.35;
  }

  .cc-actions{
    gap:6px;
  }

  .cc-btn{
    min-height:36px;
    padding:7px 8px;
    font-size:11.5px;
  }

  .cc-toggle{
    padding:8px 9px;
  }
}