/* =========================================
   Cookie-Box (scoped) – mittig, responsive,
   beeinflusst NICHT die restliche Seite
   ========================================= */

/* Vollflächiger, klick-durchlässiger Layer nur für die Box */
.cookie-container{
  position: fixed;
  inset: 0;
  z-index: 2147483647;              /* ganz oben über Navbar/Content */
  display: grid;
  place-items: center;              /* zentriert die Box */
  pointer-events: none;             /* Klicks gehen durch – außer auf die Box */
  background: transparent;          /* kein Overlay-Film */
  isolation: isolate;               /* eigener Stacking-Context */
  /* sichert Abstand zu Notch/Homebar auf Mobile */
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* Alles in der Box bleibt isoliert (keine globalen Typo-Änderungen) */
.cookie-container .cookie-box,
.cookie-container .cookie-box *{
  box-sizing: border-box;
  font: inherit;                    /* übernimmt Schrift der Seite */
  color: inherit;
}

/* =========================================
   Grundbox – mittig + fluid + höhenbewusst
   ========================================= */
.cookie-container .cookie-box{
  position: relative;               /* im Grid zentriert */
  width: clamp(18rem, 92vw, 56rem); /* dynamische Breite */
  max-width: 100%;
  max-height: calc(100dvh - 32px);  /* bleibt vollständig sichtbar */
  overflow: auto;                   /* scrollt NUR wenn nötig */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  padding: 27px;                    /* optisch zu 30px passend, aber kompakter */
  border-radius: 20px;
  box-shadow: 0 2px 10px 5px rgba(0,0,0,.1);

  display: none;                    /* JS zeigt auf block */
  pointer-events: auto;             /* Box bleibt klickbar */
  z-index: 2147483647;              /* zusätzliche Absicherung */
}

/* =========================================
   Typografie NUR in der Box (alles −3px)
   ========================================= */
.cookie-container .cookie-box h2{ font-size: 17px; margin-block: 8px; } /* vorher 20px */
.cookie-container .cookie-box p{  font-size: 12px; line-height: 22px; margin: 0; } /* vorher 15px */
.cookie-container .cookie-box a{  font-size: 11px; text-decoration: none; margin-top: 4px; } /* vorher 14px */

/* Listen in der Box */
.cookie-container .cookie-box ul{ list-style: disc;   margin: 0 0 0 1.2em; padding: 0; }
.cookie-container .cookie-box ol{ list-style: decimal;margin: 0 0 0 1.2em; padding: 0; }
.cookie-container .cookie-box li{ font-size: 12px; line-height: 22px; margin: 0; padding: 0; } /* wie p */

/* Hilfsklassen (−3px Anpassung, falls genutzt) */
.cookie-container .cookie-box .fs-25{ font-size: 22px; } /* vorher 25px */
.cookie-container .cookie-box .ta-left{ text-align: left; }
.cookie-container .cookie-box .ta-center{ text-align: center; }
.cookie-container .cookie-box .position-relative{ position: relative; }

/* Close-Icon */
.cookie-container .cookie-box .fa-xmark{
  position: absolute;
  top: 16px;                        /* etwas kompakter */
  right: 12px;
  font-size: 15px;                  /* vorher 18px */
  cursor: pointer;
}

/* Medien/Buttons in der Box (−3px) */
.cookie-container .cookie-box .large-image{ width: 72px; }  /* vorher 80px */
.cookie-container .cookie-box .btn{
  margin: 12px 5px 7px 0;
  padding: 12px 34px;
  border-radius: 8px;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 12px;                  /* vorher 15px */
  font-weight: 600;
  cursor: pointer;
  background: #0066ff;
}
.cookie-container .cookie-box .rounded-btn{ border-radius: 50px; width: 50%; }
.cookie-container .cookie-box .dark-btn{ background: #2e2e2e; }
.cookie-container .cookie-box .my-options{ font-size: 11px; margin-top: 4px; } /* vorher 14px */

/* =========================================
   Varianten – alle fluid und gescoped
   ========================================= */
.cookie-container .cookie-box.small{ padding: 13px; }
.cookie-container .cookie-box.small .heading{ display:flex; align-items:center; gap:8px; }
.cookie-container .cookie-box.small img{
  width: 32px; background:#c4d3ff; padding:4px; border-radius:50%;
}
.cookie-container .cookie-box.small .settings-btn{
  background: transparent; color:#045adb; border:1px solid #0066ff;
}

/* „wide“ (breiteres Limit) */
.cookie-container .cookie-box.wide{
  text-align: left;
  width: clamp(22rem, 92vw, 64rem);
}
.cookie-container .cookie-box.wide .manage-btn{
  background: transparent; color:#000; border:1px solid #a1a0a0; width:100%;
  margin-top: 8px; margin-bottom: 0;
}

/* Dark Theme */
.cookie-container .cookie-box.dark{
  text-align: left;
  color: #fff;
  background: #333;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  width: clamp(18rem, 92vw, 56rem);
}
.cookie-container .cookie-box.dark h2,
.cookie-container .cookie-box.dark p,
.cookie-container .cookie-box.dark i,
.cookie-container .cookie-box.dark li{ color:#fff; }
.cookie-container .cookie-box.dark img{ width: 47px; } /* vorher 50px */
.cookie-container .cookie-box.dark button{ width: 100%; }

/* Chocolate Theme */
.cookie-container .cookie-box.chocolate{
  background: #fff2e5;
  color: #804000;
  border-radius: 10px;
  text-align: center;
  width: clamp(18rem, 92vw, 56rem);
  padding: 32px;
}
.cookie-container .cookie-box.chocolate img{ width: 84px; } /* vorher 90px */
.cookie-container .cookie-box.chocolate h2{ color: #b35900; }
.cookie-container .cookie-box.chocolate p{ color: #804000; }
.cookie-container .cookie-box.chocolate button{
  margin-top: 12px;
  background: #804000;
  color: #fdbd7c;
  display: block;
  width: 100%;
  border: 0;
  font-size: 14px;                 /* vorher 17px */
  cursor: pointer;
}
.cookie-container .cookie-box.chocolate .skip-btn{ background: transparent; color:#804000; }

/* Gradient Theme */
.cookie-container .cookie-box.gradient{
  background-image: linear-gradient(to right, rgb(250,130,150), rgb(5,5,216));
  color: #fff;
  width: clamp(18rem, 92vw, 56rem);
}
.cookie-container .cookie-box.gradient button{ background: #292929; }

/* =========================================
   Bottom-Bar-Varianten (optional, bleiben unten)
   ========================================= */
.cookie-container .cookie-box.lg{
  position: fixed;
  inset: auto 0 0 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;                    /* leicht kompakter */
  border-radius: 0;
  width: 100%;
  background: #fff;
}
.cookie-container .cookie-box.lg .text{ display:flex; align-items:center; gap:8px; }
.cookie-container .cookie-box.lg img{ width: 22px; }
.cookie-container .cookie-box.lg .fa-xmark{ top: 16px; right: 14px; font-size: 12px; }

.cookie-container .cookie-box.wider{
  position: fixed;
  inset: auto 0 0 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 3px solid #0066ff;
  padding: 8px 16px;
  border-radius: 0;
  text-align: center;
  width: 100%;
  background: #fff;
  display: none;
}
.cookie-container .cookie-box.wider .decline-btn{
  background: transparent; color:#0066ff; border:1px solid #0066ff;
}

/* =========================================
   Responsive Feinschliff
   ========================================= */
@media (max-width: 600px){
  .cookie-container .cookie-box{
    padding: 20px;
    width: min(96vw, 34rem);
    max-height: calc(100dvh - 24px);
  }
  .cookie-container .cookie-box .btn{ width: 100%; }
  .cookie-container .cookie-box .large-image{ width: 56px; }
}

@media (max-width: 380px){
  .cookie-container .cookie-box{
    border-radius: 12px;
    width: 96vw;                     /* nutzt fast volle Breite */
    padding: 16px;
  }
  .cookie-container .cookie-box h2{ font-size: 16px; }
  .cookie-container .cookie-box .large-image{ width: 48px; }
}