@charset "UTF-8";

:root {
    
    --theme-color-100: #f5f7fa;
    --theme-color-300: #dfe3e8;
    --theme-color-600: #034b68;      
    --theme-color-900: #121416;

    --accent-color-200: #d6dde1;    
    --theme-box-shadow: 0 2px 6px rgba(7, 7, 8, 0.4);  

    --font-size-small: 1rem;
    --font-size-primary: 1.125rem;
    --font-size-100: 1.125rem;
    --font-size-200: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --font-size-300: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);  
    --font-size-400: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
    --font-size-500: clamp(1.75rem, 1.45rem + 0.8vw, 2.25rem);  
    --font-size-600: clamp(2.25rem, 1.85rem + 1.2vw, 3rem);

}

/* DARK Mode */

.darkmode {
    
     --theme-color-100: #121416;
    --theme-color-300: #242628;
    --theme-color-600: #9dd4e8;
    --theme-color-900: #f5f7fa;

    --accent-color-200: #4a4b4d;   
    --theme-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* Overlay */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18,20,22,.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Sichtbar */
.cookie-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Banner */
.cookie-banner {
  background-color: var(--theme-color-600);
  color: var(--theme-color-100);
  padding-block: 2rem;
  width: 100%;
  z-index: 100;
}

.cookie-banner:focus-visible {
    outline: 2px dashed var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
}

.cookie-banner__inner {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 0 auto;
    margin-inline: auto;
}

.cookie-banner__inner > *:not(:last-child){
    margin-block-end: .5rem;
}

.cookie-banner__inner h2 {
    font-size: var(--font-size-200);
}

.cookie-btn {
  min-width: 260px;
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  position: relative;
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-radius: 100vw;
  text-box: trim-both cap alphabetic;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--theme-color-900);
  color: var(--theme-color-100);
  margin: .25rem 0;
}

.cookie-btn:hover {
    background-color: var(--accent-color-200);
    color: var(--theme-color-900);
}

.cookie-btn:focus-visible {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
}

@media screen and (prefers-reduced-motion: no-preference) {
  .cookie-banner {
  transform: translateY(100%);
  transition: transform 0.5s ease;
}

.cookie-overlay.active .cookie-banner {
  transform: translateY(0);
}

}

@media (prefers-contrast: more) {
    
    :root {
        --theme-color-100: #fffdf8;
        --theme-color-300: #dfdfdf;
        --theme-color-600: #05afff;
        --theme-color-900: #070707;

        --accent-color-200: #dfefff;
        --theme-box-shadow: 0 0 0 3px rgba(24, 26, 27, 0.8);
    }

    .darkmode {
        --theme-color-100: #070707;
        --theme-color-300: #1f2123;
        --theme-color-600: #5bc0e8;
        --theme-color-900: #fffdf8;

        --accent-color-200: #2a2c2f;
        --theme-box-shadow: 0 0 0 3px rgba(254, 254, 254, 0.8);
    }
    
    .cookie-btn {
        background-color: var(--theme-color-900);
        color: var(--theme-color-10);
    }
    
}

 @media (hover: none) {
   .cookie-btn:hover {
    background-color: var(--theme-color-900);
  color: var(--theme-color-100);
}
}