/* Ab hier selbst generierter Code */
/* Gesamt-Container */
#cookiesjsr {
  background: #ffffff !important; /* Weißer Hintergrund */
  font-family: Arial, sans-serif !important;
  
}
/* Cookie-Banner soll sich mit der Seite mitbewegen (nur Desktop) */
@media (min-width: 601px) { /* Nur für Desktop */
  .cookiesjsr-banner {
    position: sticky !important; /* Banner bleibt sichtbar & bewegt sich mit */
    top: 10px !important; /* 10px Abstand zum oberen Rand für sanfte Bewegung */
    left: 0 !important;
    width: 100% !important;
    z-index: 9998 !important; /* Sicherstellen, dass es über dem Inhalt bleibt */
    background: white !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) !important; /* Leichter Schatten für bessere Sichtbarkeit */
    margin-top: 10px !important; /* Etwas Abstand für flüssige Bewegung */
  }
}

/* Falls Sticky nicht funktioniert, absolute Positionierung als Fallback */
@supports not (position: sticky) {
  .cookiesjsr-banner {
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    width: 100% !important;
  }
}

/* Banner-Container im Flex-Layout (Text links, Buttons rechts) */
.cookiesjsr-banner {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 15px !important;
}


/* Linker Bereich mit Text (blauer Rahmen & mehr Abstand zu den Buttons) */
.cookiesjsr-banner--info {
  flex: 1 !important;
  padding: 15px !important;
  border: 2px solid #0056b3 !important; /* Blauer Rahmen */
  border-radius: 5px !important;
  background: #f8f9fa !important; /* Leicht grauer Hintergrund */
  display: flex !important;
  align-items: center !important;
  margin-right: 20px !important; /* Abstand zwischen Text und Buttons */
}

/* Button-Container rechts mit Buttons untereinander (Rahmen entfernt) */
.cookiesjsr-banner--action {
  display: flex !important;
  flex-direction: column !important; /* Untereinander anordnen */
  align-items: center !important;
  gap: 10px !important;
  width: 200px !important; /* Einheitliche Breite für Buttons */
}

/* Einheitliche Button-Größe */
.cookiesjsr-btn {
  width: 100% !important; /* Gleiche Breite für alle Buttons */
  text-align: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 12px 15px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  background: white !important;
  color: #0056b3 !important;
  transition: background 0.3s, color 0.3s !important;
  border: none !important; /* Rahmen entfernt */
}

/* "Alle ablehnen"-Button */
.denyAll {
  color: #0056b3 !important;
}

/* "Alle akzeptieren"-Button (hervorgehoben) */
.allowAll {
  background: #0056b3 !important;
  color: white !important;
}

/* Hover-Effekte für Buttons */
.cookiesjsr-btn:hover {
  background: #0056b3 !important;
  color: white !important;
}

/* Hover für "Alle akzeptieren" (leicht dunkler) */
.allowAll:hover {
  background: #003d80 !important;
}

/* MOBILE ANSICHT: Banner verkleinern & Buttons mit blauem Rahmen */
@media (max-width: 600px) {
  .cookiesjsr-banner {
    flex-direction: column !important;
    text-align: center !important;
    position: fixed !important;
    top: 10% !important; /* Banner weiter nach oben verschieben */
    left: 5% !important;
    width: 90% !important; /* Breite reduzieren für bessere Sichtbarkeit */
    height: auto !important; /* Automatische Höhe für besseren Fit */
    background: rgba(255, 255, 255, 0.98) !important; /* Leicht transparentes Overlay */
    z-index: 9999 !important; /* Blockiert Navigation */
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important; /* Abgerundete Ecken */
  }

 /* MOBILE ANSICHT: Text mittig innerhalb des Banners platzieren */
@media (max-width: 600px) {
  .cookiesjsr-banner--info {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important; /* Horizontal ausrichten */
    align-items: center !important; /* Vertikal ausrichten */
    flex-direction: column !important;
    border: none !important; /* Rahmen entfernen */
  }

  /* Buttons unter den Text setzen & mittig ausrichten */
  .cookiesjsr-banner--action {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important; /* Mehr Abstand zwischen den Buttons */
  }

  /* Buttons gleich groß & mit blauem Rahmen */
  .cookiesjsr-btn {
    width: 85% !important; /* Einheitliche Breite für Buttons */
    border: 2px solid #0056b3 !important; /* Blauer Rahmen */
    color: #0056b3 !important;
    font-size: 14px !important; /* Kleinere Schrift für bessere Sichtbarkeit */
    padding: 10px !important;
  }

  /* "Alle akzeptieren"-Button (hervorgehoben) */
  .allowAll {
    background: #0056b3 !important;
    color: white !important;
  }

  /* Hover-Effekte für alle Buttons */
  .cookiesjsr-btn:hover {
    background: #0056b3 !important;
    color: white !important;
  }
}

/* EINSTELLUNGSFENSTER */
/* Cookie-Einstellungen-Fenster für Desktop & Mobile optimieren */
.cookiesjsr-layer {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60% !important; /* Größer für Desktop */
  max-width: 600px !important;
  background: #ffffff !important;
  border: 2px solid #0056b3 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  padding: 20px !important;
  z-index: 10000 !important; /* Sicherstellen, dass es über dem Banner liegt */
  display: none !important; /* Standardmäßig versteckt */
}

/* Overlay für den Hintergrund */
.cookiesjsr-layer--overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important; /* Dunkler Hintergrund für Fokus */
  z-index: 9999 !important;
  display: none !important; /* Standardmäßig versteckt */
}

/* Header-Bereich des Fensters */
.cookiesjsr-layer--header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: bold !important;
  border-bottom: 2px solid #ddd !important;
  padding-bottom: 10px !important;
}

/* Schließen-Button */
.cookiesjsr-layer--close {
  background: none !important;
  border: none !important;
  font-size: 16px !important;
  cursor: pointer !important;
  color: #0056b3 !important;
}

/* Scrollbarer Body-Bereich */
.cookiesjsr-layer--body {
  max-height: 400px !important; /* Scrollbare Höhe für Desktop */
  overflow-y: auto !important;
  padding: 10px 0 !important;
}

/* Tabs im Cookie-Einstellungen-Fenster */
.cookiesjsr-service-groups {
  display: flex !important;
  justify-content: space-around !important;
  border-bottom: 2px solid #ddd !important;
  padding-bottom: 10px !important;
}

/* Tabs-Buttons */
.cookiesjsr-service-group--tab {
  background: none !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 10px 15px !important;
  transition: color 0.3s, border-bottom 0.3s !important;
}

/* Aktiver Tab */
.cookiesjsr-service-group--tab[aria-selected="true"] {
  color: #0056b3 !important;
  border-bottom: 3px solid #0056b3 !important;
}

/* Mobile Ansicht: Fenster soll über dem Banner erscheinen & scrollbar sein */
@media (max-width: 600px) {
  .cookiesjsr-layer {
    width: 95% !important;
    max-width: 90% !important;
    height: 80% !important; /* Höhe angepasst für mobiles Layout */
    top: 10% !important;
    transform: translate(-50%, 0) !important; /* Nur nach links/rechts zentrieren */
    overflow-y: auto !important;
    display: block !important; /* Standardmäßig sichtbar für Testzwecke */
  }

  .cookiesjsr-layer--body {
    max-height: 60vh !important; /* Höhe anpassen für bessere Scrollbarkeit */
  }

  .cookiesjsr-service-groups {
    flex-direction: column !important;
  }

  .cookiesjsr-service-group--tab {
    text-align: center !important;
  }
}
}