/*
 * Consent-Banner-Aussehen fuer die oeffentlichen Websites
 * Ziel-Pfad auf dem Server: /public/assets/css/site_popup.css
 *
 * Bewusst OHNE Tailwind - die Website nutzt Tailwind, laedt es aber im
 * "Utility-First"-Modus ueber den Baukasten. Ein Popup, das ausser der
 * Seite laufen kann (auch auf der Wartungsseite), braucht sein
 * Aussehen selbst. Deshalb schreibgeschuetzte, klar benannte Klassen
 * unter dem Praefix .site-popup, kein Framework noetig.
 */

.site-popup {
  position: fixed;
  z-index: 9999;
  max-width: 720px;
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.site-popup[data-consent-bereit="1"] {
  opacity: 1;
  transform: translateY(0);
}

.site-popup--unten { left: 16px; right: 16px; bottom: 16px; margin: 0 auto; }
.site-popup--oben  { left: 16px; right: 16px; top: 16px;    margin: 0 auto; }
.site-popup--mitte { left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 12px)); }
.site-popup--mitte[data-consent-bereit="1"] { transform: translate(-50%, -50%); }
.site-popup--ecke-ur { right: 16px; bottom: 16px; max-width: 380px; }

.site-popup__inhalt { padding: 20px 22px; }
.site-popup__titel  { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #fff; }
.site-popup__text   { margin: 0 0 14px; color: #cbd5e1; }
.site-popup__text a { color: #93c5fd; text-decoration: underline; }

.site-popup__kategorien { margin: 8px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.site-popup__kat {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  cursor: pointer;
}
.site-popup__kat--noetig { opacity: .8; cursor: default; }
.site-popup__kat input   { grid-row: 1 / 3; align-self: start; margin-top: 3px; }
.site-popup__kat-label   { font-weight: 500; color: #fff; }
.site-popup__kat-text    { grid-column: 2; color: #94a3b8; font-size: 13px; }

.site-popup__knopfleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px;
}
.site-popup__knopf {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.site-popup__knopf:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.site-popup__knopf:disabled { opacity: .5; cursor: default; }

.site-popup__knopf--primaer {
  background: #22c55e;
  border-color: #16a34a;
  color: #052e16;
  font-weight: 600;
}
.site-popup__knopf--primaer:hover:not(:disabled) { background: #16a34a; color: #f0fdf4; }

.site-popup__knopf--flach {
  background: transparent;
  border-color: transparent;
  color: #94a3b8;
}
.site-popup__knopf--flach:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
}

/* Kleine Bildschirme: Knopfleiste umbrechen, Ecke -> Unten breit. */
@media (max-width: 520px) {
  .site-popup--ecke-ur { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .site-popup__knopfleiste { justify-content: stretch; }
  .site-popup__knopf { flex: 1 1 auto; }
}

/* Hell-Modus: die Website kann in einem hellen Theme laufen. Wir
   passen an, ohne eine zusaetzliche Klasse zu verlangen. */
@media (prefers-color-scheme: light) {
  .site-popup {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, .12);
  }
  .site-popup__titel { color: #0f172a; }
  .site-popup__text  { color: #334155; }
  .site-popup__kat   { background: #f8fafc; border-color: rgba(15, 23, 42, .08); }
  .site-popup__kat-label { color: #0f172a; }
  .site-popup__kat-text  { color: #64748b; }
  .site-popup__knopf { background: #f1f5f9; border-color: rgba(15, 23, 42, .1); color: #0f172a; }
  .site-popup__knopf:hover:not(:disabled) { background: #e2e8f0; }
  .site-popup__knopf--flach { background: transparent; border-color: transparent; color: #64748b; }
}

/* ---------- Werbebanner ----------
   Teilt sich Rahmen, Farben und Knopf-Aussehen mit dem Consent-Hinweis;
   eigen sind nur das Bild, der Schliessen-Knopf und die etwas groessere
   Breite in der Mitte-Position. */
.site-popup--werbung { max-width: 460px; overflow: hidden; }
.site-popup--werbung.site-popup--unten,
.site-popup--werbung.site-popup--oben { max-width: 720px; }

.site-popup__bild {
  display: block; width: 100%; height: auto; max-height: 220px;
  object-fit: cover; border-radius: 12px 12px 0 0;
}

/* Der Schliessen-Knopf liegt UEBER dem Bild, deshalb absolut und mit
   eigenem Grund - auf einem hellen Bild waere ein blasses x unsichtbar. */
.site-popup__schliessen {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .55); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s ease;
}
.site-popup__schliessen:hover { background: rgba(15, 23, 42, .8); }

/* Ohne Bild sitzt der Knopf im Text - dann braucht der Inhalt oben
   rechts etwas Luft, damit die Ueberschrift nicht darunter laeuft. */
.site-popup--werbung .site-popup__inhalt { padding-right: 48px; }

@media (prefers-color-scheme: light) {
  .site-popup__schliessen { background: rgba(15, 23, 42, .4); }
  .site-popup__schliessen:hover { background: rgba(15, 23, 42, .7); }
}