/* =========================================
   Privacy Banner (vormals "No-Cookie")
   ========================================= */

/* ===== Variablen – Farben & Stil ===== */
:root {
  --nc-bg: rgba(60, 60, 59, 0.96);       /* dunkles Grau (#3c3c3b) */
  --nc-fg: #ffffff;                      /* Text weiß */
  --nc-accent: #67b9b0;                  /* Twikis-Türkis */
  --nc-shadow: rgba(255, 255, 255, 0.88);/* weißer Schatten oben */
}

/* ===== Grundlayout (zentriert wie bei Mindspot) ===== */
#privacy-banner{
  position: fixed;
  inset-inline: 0;        /* left/right in logisch */
  bottom: 0;
  z-index: 9999;

  background: var(--nc-bg);
  color: var(--nc-fg);

  display: flex;
  justify-content: center;      /* Text zentriert */
  align-items: flex-start;      /* oben bündig zur 1. Textzeile */
  text-align: center;

  font-family: 'FibonNeue-Regular','FibonNeue-Light', Arial, sans-serif;
  line-height: 1;

  /* Mobile: Seitenabstand max. 25px + iOS Safe Area */
  padding: 16px 25px calc(16px + env(safe-area-inset-bottom));

  box-shadow:
    0 -1px 0 #ffffff,
    0 -10px 26px var(--nc-shadow);

  /* verhindert Layout-Schieben bei Einblendung */
  contain: layout paint;
}

/* Inhalt begrenzen */
#privacy-banner p{
  margin: 0;
  max-width: 1200px;
}

/* Links */
#privacy-banner a{
  color: var(--nc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: 'FibonNeue-Medium','FibonNeue-Regular', Arial, sans-serif;
}
#privacy-banner a:hover{ opacity:.9; }

/* ===== Close-Button: absolut (nimmt keine Breite) ===== */
#privacy-close{
  position: absolute;
  right: 25px;          /* = Mobile-Padding rechts */
  top: 7px;            /* leicht höher für optische Zeilenhöhe */

  /* Theme-Button-Styles neutralisieren */
  appearance: none; -webkit-appearance: none;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none;
  min-width: 0;

  /* Mobile etwas kleiner, damit nichts überlappt */
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nc-fg);
  font-size: 3.2rem;
  line-height: 0.9; font-weight: 400;
  cursor: pointer;
  transition: color .2s ease;
  transform: translateY(-0.15em);
}

/* sichtbarer Tastaturfokus (A11y) */
#privacy-close:focus-visible{
  outline: 2px dashed var(--nc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

#privacy-close:hover,
#privacy-close:focus{ color: var(--nc-accent); }

/* ===== Schriftgrößen ===== */
#privacy-banner{ font-size:16px; } /* Mobile */

/* Tablet */
@media (min-width:768px){
  #privacy-banner{
    font-size:18px;
    padding-left:56px; padding-right:56px;
  }
  #privacy-close{
    right:56px; top:5px;
    width:52px; height:52px;
    font-size:4rem;
    transform: translateY(-0.18em);
  }
}

/* Desktop */
@media (min-width:1200px){
  #privacy-banner{
    font-size:20px;
    padding-left:72px; padding-right:72px;
  }
  #privacy-close{
    right:72px; top:10px;
    width:52px; height:52px;
    font-size:5rem;
    transform: translateY(-0.20em);
  }
}

/* ===== Responsive Breakpoint nach dem Beistrich ===== */
/* Desktop: kein Umbruch */
.br-md{ display:inline; }
/* Bis 1199px: harter Umbruch nach dem Komma */
@media (max-width:1199px){
  .br-md{ display:block; height:0; }
}

/* ===== Bewegungen minimieren, wenn Nutzer das wünscht ===== */
@media (prefers-reduced-motion: reduce){
  #privacy-close{ transition: none; }
}

/* ===== Druck: Banner nicht ausgeben ===== */
@media print{
  #privacy-banner{ display: none !important; }
}


/* Banner verstecken, wenn Session-Flag gesetzt wurde */
html.pb-hide #privacy-banner { display: none !important; }

/* Button wirklich über allem und klickbar */
#privacy-close{
  z-index: 2147483647;      /* maximaler z-index im Stack */
  pointer-events: auto;     /* falls Eltern etwas deaktivieren */
}

/* Sicherstellen, dass nichts drüberliegt */
#privacy-banner{
  z-index: 2147483646;      /* knapp darunter */
  pointer-events: auto;
}