/* ============================================================
   Cookie-Consent-Tool (Softconcis-Standard) – Oronos®
   Smooth Fade-In/Out · einheitliche Abstände über --dj-gap
   ============================================================ */
#dj-cookie-overlay {
  --dj-gap: 30px;             /* einheitlicher Innenabstand (Desktop) */
  --dj-gap-y: 16px;           /* einheitlicher vertikaler Rhythmus */
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(20, 30, 40, 0);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  visibility: hidden;
  transition: background .4s ease, visibility 0s linear .4s;
}
#dj-cookie-overlay.dj-show {
  background: rgba(20, 30, 40, .55);
  visibility: visible;
  transition: background .4s ease;
}
.dj-cookie-box {
  background: #fff; max-width: 720px; width: 100%; border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  max-height: 92vh; display: flex; flex-direction: column;
  font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #555;
  opacity: 0; transform: translateY(28px) scale(.97);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.9,.36,1);
}
#dj-cookie-overlay.dj-show .dj-cookie-box {
  opacity: 1; transform: translateY(0) scale(1);
}

/* Ansichten (Start / Präferenzen) füllen die Box als Flex-Spalte */
.dj-view {
  display: flex; flex-direction: column; min-height: 0; width: 100%;
  animation: djViewIn .25s ease both;
}
.dj-view[hidden] { display: none; }
@keyframes djViewIn { from { opacity: .4; } to { opacity: 1; } }

/* Gruppen in der Präferenzen-Ansicht */
.dj-group {
  border-top: 1px solid #e4e8ec;
  padding-top: var(--dj-gap-y);
  margin-bottom: var(--dj-gap-y);
}
.dj-group-head {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 16px; color: #333; font-weight: 700;
}
.dj-group-head input { width: 17px; height: 17px; accent-color: #eb9e38; }
.dj-group-desc { font-size: 14px; color: #777; margin: 8px 0 var(--dj-gap-y); }
.dj-cookie-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--dj-gap) var(--dj-gap) var(--dj-gap-y);
}
.dj-cookie-head h2 {
  margin: 0; color: #333; font-size: 21px; letter-spacing: .04em; font-weight: 700;
}
.dj-cookie-close {
  background: none; border: none; font-size: 26px; cursor: pointer;
  color: #888; line-height: 1; padding: 0 2px; transition: color .2s;
}
.dj-cookie-close:hover { color: #333; }
.dj-cookie-body { padding: 0 var(--dj-gap); overflow-y: auto; line-height: 1.55; }
.dj-cookie-body p { margin: 0 0 var(--dj-gap-y); }
.dj-cookie-body a { color: #eb9e38; text-decoration: none; }
.dj-cookie-body a:hover { text-decoration: underline; }
.dj-cookie-cats {
  display: flex; flex-wrap: wrap; gap: var(--dj-gap-y) 26px;
  margin: var(--dj-gap-y) 0; justify-content: center;
}
.dj-cookie-cats label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: #333; cursor: pointer;
}
.dj-cookie-cats input { width: 17px; height: 17px; accent-color: #eb9e38; }

/* ---------- Service-Karten ---------- */
.dj-service {
  border: 1px solid #e4e8ec; border-radius: 4px;
  padding: var(--dj-gap-y); margin-bottom: var(--dj-gap-y);
  background: #fafbfc;
}
.dj-service-name { font-weight: 700; color: #0072bc; margin-bottom: 8px; }
.dj-service-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dj-service-table th {
  text-align: left; vertical-align: top; color: #888; font-weight: 400;
  padding: 3px 12px 3px 0; width: 110px; white-space: nowrap;
}
.dj-service-table td { padding: 3px 0; color: #444; word-break: break-word; }
.dj-service-table a { color: #eb9e38; text-decoration: none; }
.dj-service-table a:hover { text-decoration: underline; }

.dj-cookie-foot { padding: var(--dj-gap-y) var(--dj-gap) var(--dj-gap); }
.dj-cookie-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
/* Alle drei Buttons gleichwertig neutral (Softconcis/Borlabs-Standard) */
.dj-cookie-actions button {
  border: 1px solid #d9dee3; background: #f4f5f6; color: #333;
  padding: 13px 12px; border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.25;
  transition: background .2s, border-color .2s, transform .15s;
}
.dj-cookie-actions button:hover { background: #eceef0; border-color: #c6ccd2; }
.dj-cookie-actions button:active { transform: scale(.98); }
.dj-cookie-links {
  text-align: center; margin-top: var(--dj-gap-y); font-size: 14px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
}
.dj-cookie-links a { color: #eb9e38; text-decoration: none; }
.dj-cookie-links a:hover { text-decoration: underline; }

/* Floating-Badge zum Wiederöffnen */
#dj-cookie-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 999990;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: #0072bc; color: #0072bc;   /* currentColor = Chips/Biss im Icon */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .2s;
}
#dj-cookie-badge svg { display: block; }
#dj-cookie-badge:hover { color: #005a94; }
#dj-cookie-badge.dj-show { opacity: 1; transform: scale(1); pointer-events: auto; }
#dj-cookie-badge:hover { background: #005a94; }

/* Entsperrte Embeds sanft einblenden */
.dj-unlocked-embed { animation: djFadeIn .5s ease both; }
@keyframes djFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Mobil: kompakte, EINHEITLICHE Abstände ---------- */
@media (max-width: 560px) {
  #dj-cookie-overlay {
    --dj-gap: 18px;           /* ein Wert für alle Seitenränder */
    --dj-gap-y: 12px;         /* ein Wert für alle vertikalen Abstände */
    padding: 12px;
    align-items: flex-end;    /* Sheet-artig unten, kürzere Wege */
  }
  .dj-cookie-box { font-size: 14px; max-height: 88vh; }
  .dj-cookie-head h2 { font-size: 17px; }
  .dj-cookie-body { line-height: 1.5; }
  .dj-cookie-cats { gap: 10px 18px; justify-content: flex-start; }
  .dj-cookie-cats label { font-size: 14px; }
  .dj-cookie-actions { grid-template-columns: 1fr; gap: 8px; }
  .dj-cookie-actions button { padding: 12px; font-size: 14px; }
  .dj-cookie-links { gap: 4px 14px; font-size: 13px; }
  .dj-service { padding: 10px; margin-bottom: 10px; }
  .dj-service-table { font-size: 12.5px; }
  .dj-service-table th { width: 92px; padding-right: 8px; }
  #dj-cookie-badge { width: 42px; height: 42px; left: 12px; bottom: 12px; }
}