/* Die Bibliothek bringt ihr eigenes Aussehen mit, hier steht nur, was zur Marke passen muss:
   das Rot der Knöpfe, das Grau der Flächen und die Insel unten links zum Wiederöffnen. */

#cc-main {
  --cc-btn-primary-bg: #d1352b;
  --cc-btn-primary-border-color: #d1352b;
  --cc-btn-primary-hover-bg: #b62c23;
  --cc-btn-primary-hover-border-color: #b62c23;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-color: #fff;
}

#cc-main a {
  color: #b62c23;
  font-weight: 500;
  text-decoration: none;
}

#cc-main a:hover {
  color: #93241d;
}

/* Kein Rahmen des Browsers auf der Cookie-Oberfläche, die Seite blendet ihn überall aus */
#cc-main a,
#cc-main button,
#cc-main input,
#cc-main .pm__badge {
  outline: none;
}

/* Ein gleichmäßiger Schein um das Banner, damit es sich von der hellen Seite abhebt */
#cc-main .cm {
  box-shadow: 0 0 28px 2px rgba(51, 51, 51, 0.45) !important;
}

/* Die Insel, über die sich die Einstellungen wieder öffnen lassen */
.cc-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background-color: #333333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 30;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.cc-toggle:hover,
.cc-toggle:focus {
  background-color: #d1352b;
  color: #fff;
  transform: scale(1.08);
  text-decoration: none;
  outline: none;
}

.cc-toggle svg {
  width: 22px;
  height: 22px;
}

/* Unter 640px rückt die Insel näher an die Ecke, halber Abstand */
@media (max-width: 640px) {
  .cc-toggle {
    bottom: 10px;
    left: 10px;
  }
}

/* Der Grund hinter dem Fenster wie bei den übrigen Fenstern der Seite */
#cc-main .pm-overlay {
  background: rgba(51, 51, 51, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Auf schmalen Geräten stehen beide Kästen mittig und so hoch, wie der Bildschirm es zulässt,
   statt ihn ganz zu füllen. Der Inhalt des Einstellungsfensters behält seinen eigenen Rollbalken,
   Kopf und Fuß bleiben dabei stehen. dvh statt vh, damit die Leisten mobiler Browser zählen. */
@media screen and (max-width: 640px) {
  #cc-main .cm,
  #cc-main .pm {
    top: 50%;
    bottom: auto;
    left: 1rem;
    right: 1rem;
    margin: 0;
    height: auto;
    max-height: calc(100dvh - 2rem);
    border-radius: var(--cc-modal-border-radius);
    transform: translateY(-50%) !important;
  }

  /* Die Bibliothek setzt ihre eigene Verschiebung mit höherer Gewichtung, deshalb hier dieselbe */
  .show--consent #cc-main .cc--anim .cm,
  .show--preferences #cc-main .cc--anim .pm {
    transform: translateY(-50%) !important;
  }
}