/* Cookie-Banner im Webstra-Design (Farben, Schrift und Rundungen wie in w26.css).
   Rechtlich wichtig, bitte so lassen: "Alle akzeptieren" und "Alle ablehnen" sehen auf beiden Ebenen gleich aus
   (gleiche Farbe, Größe und Position, equalWeightButtons in config.js), nichts ist vorausgewählt, Impressum und
   Datenschutz stehen im Banner, und die Seite bleibt bedienbar (keine Sperre davor). */
:root {
  --cc-font-family: "Thicccboi", system-ui, -apple-system, sans-serif;
  --cc-modal-border-radius: 20px;
  --cc-btn-border-radius: 12px;
  --cc-modal-margin: 16px;

  --cc-bg: #ffffff;
  --cc-primary-color: #141414;
  --cc-secondary-color: #62666c;
  --cc-link-color: #141414;

  /* Akzeptieren und Ablehnen: beide gleich, dunkel wie .btn-d */
  --cc-btn-primary-bg: #141414;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #141414;
  --cc-btn-primary-hover-bg: #000000;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #000000;

  /* Einstellungen und Speichern: hell mit Rahmen wie .btn-g */
  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: #141414;
  --cc-btn-secondary-border-color: #e6e5e1;
  --cc-btn-secondary-hover-bg: #ffffff;
  --cc-btn-secondary-hover-color: #141414;
  --cc-btn-secondary-hover-border-color: #141414;

  --cc-separator-border-color: #e6e5e1;

  /* Schalter: an = Webstra-Orange (dunklere Stufe für genug Kontrast), aus = Grau */
  --cc-toggle-on-bg: #e04e00;
  --cc-toggle-off-bg: #62666c;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-enabled-icon-color: #ffffff;
  --cc-toggle-disabled-icon-color: #ffffff;
  --cc-toggle-readonly-bg: #c9c8c3;
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-icon-color: #c9c8c3;

  --cc-section-category-border: #ecebe7;
  --cc-cookie-category-block-bg: #f5f5f3;
  --cc-cookie-category-block-border: #f5f5f3;
  --cc-cookie-category-block-hover-bg: #ecebe7;
  --cc-cookie-category-block-hover-border: #ecebe7;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #ecebe7;

  --cc-overlay-bg: rgba(20, 20, 20, 0.55);
  --cc-webkit-scrollbar-bg: #ecebe7;
  --cc-webkit-scrollbar-hover-bg: #9a9da2;

  --cc-footer-bg: #ffffff;
  --cc-footer-color: #62666c;
  --cc-footer-border-color: #e6e5e1;
}

#cc-main {
  -webkit-font-smoothing: antialiased;
}
/* Das Banner selbst bekommt beim Öffnen den Fokus (für Screenreader), dort keinen Rahmen zeigen */
#cc-main .cm:focus,
#cc-main .pm:focus {
  outline: none;
}
#cc-main button:focus-visible,
#cc-main a:focus-visible,
#cc-main .section__toggle:focus-visible + .toggle__icon {
  outline: 2px solid #e04e00;
  outline-offset: 2px;
}

/* Erste Ebene: Leiste über die ganze Breite unten, Inhalt auf der Breite der Website (1240 px) */
#cc-main .cm--bar {
  border-top: 1px solid #e6e5e1;
  box-shadow: 0 -18px 50px -24px rgba(20, 20, 20, 0.3);
}
#cc-main .cm__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #141414;
}
#cc-main .cm__desc {
  font-size: 14px;
  line-height: 1.55;
}
#cc-main .cm__title + .cm__desc {
  margin-top: 6px;
}
/* Akzeptieren und Ablehnen nebeneinander, immer gleich breit; Einstellungen darunter */
#cc-main .cm .cm__btn-group:has(> [data-role="all"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  gap: 8px;
}
#cc-main .cm .cm__btn-group:has(> [data-role="all"]) > .cm__btn {
  margin: 0 !important;
  min-width: 0;
}
#cc-main .cm .cm__btn-group + .cm__btn-group {
  margin: 8px 0 0 !important;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
  transform: translateY(-1px);
}
/* Die Vorlage gibt Leisten-Knöpfen 2em Rand links und rechts, dann bricht „Alle akzeptieren“ um */
#cc-main .cm--bar .cm__btn {
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}
/* In den Einstellungen Akzeptieren und Ablehnen ebenfalls gleich breit */
@media screen and (min-width: 641px) {
  #cc-main .pm__btn-group:has(> [data-role="all"]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #cc-main .pm__btn-group:has(> [data-role="all"]) > .pm__btn {
    margin: 0;
    min-width: 150px;
  }
}
#cc-main .cm__footer {
  background: none;
  border: 0;
  font-size: 13px;
}
#cc-main .cm__link-group a,
#cc-main .cm__links a {
  color: #62666c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#cc-main .cm__link-group a:hover,
#cc-main .cm__links a:hover {
  color: #141414;
}

/* Ab Tablet: Text links, rechts die Knöpfe und darunter Impressum/Datenschutz, so bleibt die Leiste flach */
@media screen and (min-width: 641px) {
  #cc-main .cm--bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "texte knoepfe" "texte links";
    column-gap: 48px;
    row-gap: 10px;
    padding: 20px max(40px, calc((100vw - 1240px) / 2)) 16px;
  }
  /* Kein eigener Kasten mehr, Text, Knöpfe und Links liegen direkt im Raster */
  #cc-main .cm--bar .cm__body {
    display: contents;
  }
  /* Leere Fokus-Anker der Vorlage nehmen keinen Platz im Raster ein */
  #cc-main .cm--bar > div[tabindex] {
    position: absolute;
  }
  #cc-main .cm--bar .cm__texts {
    grid-area: texte;
    align-self: center;
    padding: 0;
  }
  #cc-main .cm--bar .cm__title,
  #cc-main .cm--bar .cm__desc {
    padding: 0;
  }
  #cc-main .cm--bar .cm__desc {
    max-height: none;
  }
  #cc-main .cm--bar .cm__btns {
    grid-area: knoepfe;
    align-self: end;
    max-width: none;
    padding: 0;
    border: 0;
  }
  #cc-main .cm--bar .cm__footer {
    grid-area: links;
    padding: 0;
  }
  #cc-main .cm--bar .cm__links {
    max-width: none;
    padding: 0;
  }
  #cc-main .cm--bar .cm__link-group {
    justify-content: center;
    gap: 20px;
  }
}
@media screen and (min-width: 641px) and (max-width: 899px) {
  #cc-main .cm--bar {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 28px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Einstellungen */
#cc-main .pm {
  border: 1px solid #e6e5e1;
}
#cc-main .pm__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#cc-main .pm__section-title {
  font-size: 16px;
  font-weight: 700;
}
#cc-main .pm__section-desc,
#cc-main .pm__section > .pm__section-desc-wrapper > p {
  font-size: 15px;
  line-height: 1.55;
}
#cc-main .pm__badge {
  background: #fff1e8;
  color: #b83e00;
  font-size: 12px;
  font-weight: 700;
}
#cc-main .pm__footer {
  border-top-color: #e6e5e1;
}
#cc-main .cc__link,
#cc-main a.cc__link {
  color: #141414;
  text-decoration: underline;
  text-decoration-color: #ff5a00;
  text-underline-offset: 3px;
}
#cc-main .cc__link:hover {
  color: #e04e00;
}

/* Handy: über die ganze Breite, kompakt. Langer Text scrollt innerhalb der Leiste */
@media screen and (max-width: 640px) {
  #cc-main .cm--bar {
    border-radius: 16px 16px 0 0;
  }
  #cc-main .cm__texts {
    padding-top: 16px;
  }
  #cc-main .cm__title {
    font-size: 17px;
  }
  #cc-main .cm__desc {
    font-size: 13.5px;
    line-height: 1.5;
    max-height: 26vh;
    padding-bottom: 10px;
  }
  #cc-main .cm__btns {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
  }
  #cc-main .cm__footer {
    padding: 2px 0 12px;
  }
}
/* Sehr schmale Handys: Knöpfe untereinander, damit kein Text bricht */
@media screen and (max-width: 359px) {
  #cc-main .cm .cm__btn-group:has(> [data-role="all"]) {
    grid-template-columns: 1fr;
  }
}