/* ==========================================================================
   Consent Manager – Banner und Einstellungs-Dialog
   Kein Dark Pattern: Ablehnen ist genauso sichtbar und erreichbar wie Annehmen.
   ========================================================================== */

#consent-banner,#consent-modal{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:#172019;line-height:1.6;
}
[hidden]{display:none!important}

/* --------------------------------- Banner -------------------------------- */
#consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:#fff;border-top:3px solid var(--green,#79ad13);
  box-shadow:0 -14px 44px rgba(9,32,19,.22);
  padding:22px 0 max(22px,env(safe-area-inset-bottom));
}
#consent-banner .cc-inner{
  width:min(1180px,calc(100% - 36px));margin:auto;
  display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
#consent-banner .cc-text{flex:1 1 420px;min-width:0}
#consent-banner h2{
  font-family:'Montserrat','Inter',sans-serif;font-size:1.12rem;margin:0 0 7px;line-height:1.3;
}
#consent-banner p{margin:0;font-size:.9rem;color:#4b554d;max-width:74ch}
#consent-banner p + p{margin-top:7px}
.cc-links{margin-top:9px;font-size:.85rem;display:flex;gap:16px;flex-wrap:wrap}
.cc-links a{color:#2f5a10;text-decoration:underline;text-underline-offset:3px}
.cc-links a:hover{color:#4a760c}

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

/* Alle drei Schaltflächen haben dieselbe Größe und klaren Kontrast. */
.cc-btn{
  font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;
  min-height:50px;padding:13px 22px;border-radius:12px;border:2px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;
  min-width:170px;transition:transform .2s,background .2s,color .2s;
}
.cc-btn:hover{transform:translateY(-2px)}
.cc-accept{background:#4f7d0d;color:#fff}
.cc-accept:hover{background:#446d0b}
.cc-reject{background:#102d1c;color:#fff}
.cc-reject:hover{background:#071c12}
.cc-settings{background:#fff;color:#1c2b1f;border-color:#9aa89c}
.cc-settings:hover{background:#eef2ee}
.cc-btn:focus-visible{outline:3px solid #0b5cd8;outline-offset:3px}

/* --------------------------------- Dialog -------------------------------- */
#consent-modal{
  position:fixed;inset:0;z-index:310;display:grid;place-items:center;padding:18px;
}
.cc-backdrop{position:absolute;inset:0;background:rgba(6,24,14,.6);backdrop-filter:blur(3px)}
.cc-dialog{
  position:relative;background:#fff;border-radius:22px;width:min(660px,100%);
  max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px rgba(4,20,11,.4);
}
.cc-head{padding:26px 28px 18px;border-bottom:1px solid #e3ebe4}
.cc-head h2{font-family:'Montserrat','Inter',sans-serif;font-size:1.3rem;margin:0}
.cc-head p{margin:9px 0 0;font-size:.89rem;color:#4b554d}
.cc-close{
  position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:11px;
  border:1px solid #dbe3dc;background:#fff;cursor:pointer;display:grid;place-items:center;color:#3b463d;
}
.cc-close:hover{background:#eef2ee}
.cc-close svg{width:17px;height:17px;fill:currentColor}
.cc-close:focus-visible{outline:3px solid #0b5cd8;outline-offset:2px}

.cc-body{padding:8px 28px 20px;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}

.cc-cat{border:1px solid #e3ebe4;border-radius:14px;padding:16px 18px;margin-top:16px;background:#fcfdfc}
.cc-cat-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.cc-cat h3{font-size:1rem;margin:0;font-family:'Inter',sans-serif;font-weight:800}
.cc-cat p{margin:8px 0 0;font-size:.87rem;color:#4b554d}
.cc-status{display:inline-block;margin-top:9px;font-size:.76rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;background:#eef2ee;color:#48544a;border-radius:99px;padding:4px 11px}

/* Schalter – auch als reiner Text bedienbar, echtes Checkbox-Element */
.cc-switch{position:relative;flex:none;display:inline-flex;align-items:center}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-switch .track{
  width:58px;height:32px;border-radius:99px;background:#c3ccc4;position:relative;
  transition:background .2s;pointer-events:none;
}
.cc-switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .2s;
}
.cc-switch input:checked + .track{background:#4f7d0d}
.cc-switch input:checked + .track::after{transform:translateX(26px)}
.cc-switch input:focus-visible + .track{outline:3px solid #0b5cd8;outline-offset:3px}
.cc-switch input:disabled{cursor:not-allowed}
.cc-switch input:disabled + .track{background:#4f7d0d;opacity:.45}

.cc-foot{
  padding:18px 28px max(18px,env(safe-area-inset-bottom));border-top:1px solid #e3ebe4;
  background:#fbfcfb;display:flex;gap:10px;flex-wrap:wrap;
}
.cc-foot .cc-btn{min-width:0;flex:1 1 160px}
.cc-note{font-size:.8rem;color:#5f6a60;margin:14px 0 0}
.cc-note a{color:#2f5a10;text-decoration:underline;text-underline-offset:3px}

/* Scroll-Lock: der Body wird an seiner aktuellen Position fixiert. Ein reines
   overflow:hidden reicht nicht aus und fuehrt bei weiter unten liegenden
   Seitenbereichen zu einer leeren Darstellung. */
body.consent-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media(max-width:760px){
  #consent-banner{padding-top:16px}
  #consent-banner .cc-inner{gap:14px}
  #consent-banner h2{font-size:1.02rem;margin-bottom:5px}
  #consent-banner p{font-size:.84rem;line-height:1.5}
  #consent-banner p + p{margin-top:5px}
  .cc-links{margin-top:7px}

  .cc-actions{width:100%;gap:8px}
  .cc-btn{min-width:0;font-size:.88rem;padding:13px 10px;min-height:48px}
  /* Annehmen und Ablehnen nebeneinander und exakt gleich gross - so bleibt der
     Banner kompakt, ohne eine der beiden Optionen zu benachteiligen. */
  #consent-banner .cc-reject,
  #consent-banner .cc-accept{flex:1 1 calc(50% - 4px)}
  #consent-banner .cc-settings{flex:1 1 100%}

  .cc-dialog{border-radius:18px;max-height:92vh}
  .cc-head,.cc-body,.cc-foot{padding-left:20px;padding-right:20px}
  .cc-head{padding-right:66px}
  .cc-foot .cc-btn{flex:1 1 100%}
}
@media(max-width:360px){
  #consent-banner .cc-reject,
  #consent-banner .cc-accept{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  .cc-btn:hover{transform:none}
  .cc-switch .track,.cc-switch .track::after{transition:none}
}