/* ===========================================================================
   Einwilligungsbanner — § 25 TDDDG

   Wird von index.html und den drei Rechtstexten geladen. Die Rechtstexte
   binden nur fonts.css und legal.css ein und kennen die Farbtoken aus
   index.html nicht, deshalb stehen sie hier eigenstaendig noch einmal.
   =========================================================================== */

dialog.hp-consent{
  --hpc-ink:    #1A1814;
  --hpc-deep:   #16110D;
  --hpc-paper:  #F4EFE6;
  --hpc-acid:   #DEFF3A;
  --hpc-muted:  #bfb3a5;
  --hpc-radius: 14px;
  --hpc-ease:   cubic-bezier(.22,.61,.36,1);

  /* Bodenleiste in beiden Betriebsarten: nicht-modal per show() im Normalfall,
     per showModal() ueber einen offenen Anfrage-Dialog (siehe raise()). */
  position: fixed;
  inset: auto 0 0 0;
  width: 100%; max-width: none; height: auto; max-height: none;
  margin: 0; border: 0; overflow: visible;
  background: transparent; color: var(--hpc-paper);
  z-index: 9000;
  padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px);
  /* Auf iPhones sitzt sonst die Home-Indicator-Leiste auf den Buttons */
  padding-bottom: calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Der Banner darf die Seite nicht blockieren — Impressum und Datenschutz
     muessen erreichbar bleiben. Nur die Karte selbst faengt Klicks. */
  pointer-events: none;
}
dialog.hp-consent:not([open]){ display: none; }
/* Nur im showModal-Zustand vorhanden — daempft den Anfrage-Dialog dahinter ab. */
dialog.hp-consent::backdrop{ background: rgba(16,14,11,.6); }

/* Das mobile Menue ist ein Vollbild-Overlay auf z-index 55. Das Banner liegt
   darueber und verdeckte sonst dessen Fusszeilen-Links. */
/* .is-raised setzt consent.js zusammen mit showModal(). Ueber eine Klasse und
   nicht ueber :modal, weil dieser Selektor nicht ueberall vorhanden ist: faellt
   er weg, versteckt die Regel ein Banner, das den Top-Layer haelt — eine
   unsichtbare Sperre. Eine Klasse versteht jede Engine. */
body.is-menu-open dialog.hp-consent:not(.is-raised){ display: none; }

/* legal.css stylt h2, p, ul und li global — auf den Rechtstexten faerbte das
   sonst in die Banner-Karte hinein (heller Trennstrich auf dunklem Grund).
   index.html hat einen eigenen Reset und ist davon nicht betroffen. */
.hp-consent__card :where(h2, p, ul, li, span, label){
  margin: 0; padding: 0; border: 0; color: inherit;
}

.hp-consent__close{
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; line-height: 1;
  background: none; border: 0; border-radius: 50%;
  font: inherit; font-size: 20px; color: var(--hpc-muted);
  cursor: pointer;
}
.hp-consent__close:hover{ color: var(--hpc-paper); background: rgba(255,255,255,.1); }
.hp-consent__close:focus-visible{ outline: 2px solid var(--hpc-acid); outline-offset: 2px; }
.hp-consent__close[hidden]{ display: none; }

.hp-consent__card{
  position: relative;
  pointer-events: auto;
  width: min(760px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--hpc-deep);
  color: var(--hpc-paper);
  border-radius: var(--hpc-radius);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.12);
  padding: clamp(20px, 4vw, 30px);
  animation: hpConsentIn .38s var(--hpc-ease) both;
}
@keyframes hpConsentIn{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hp-consent__card{ animation: none; }
}

.hp-consent__eyebrow{
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hpc-acid);
  margin-bottom: 10px;
}
.hp-consent__title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.hp-consent__text{
  font-size: 13.5px; line-height: 1.55; color: var(--hpc-muted);
  margin: 0 0 16px;
}
.hp-consent__text a{
  color: var(--hpc-paper); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.hp-consent__text a:hover{ color: var(--hpc-acid); }

/* --- Buttons: „Akzeptieren“ und „Ablehnen“ muessen gleichwertig sein.
       Gleiche Groesse, gleiches Gewicht, gleiche Schriftgroesse — der
       Unterschied liegt allein in der Fuellung. --------------------------- */
.hp-consent__actions{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.hp-consent__btn{
  flex: 1 1 200px;
  min-height: 48px;
  padding: 13px 22px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background .25s var(--hpc-ease), color .25s var(--hpc-ease);
}
.hp-consent__btn--accept{
  background: var(--hpc-acid); color: var(--hpc-ink);
  box-shadow: inset 0 0 0 1.5px var(--hpc-acid);
}
.hp-consent__btn--accept:hover{ background: #e9ff6e; }
.hp-consent__btn--reject,
.hp-consent__btn--save{
  background: transparent; color: var(--hpc-paper);
  box-shadow: inset 0 0 0 1.5px rgba(244,239,230,.85);
}
.hp-consent__btn--reject:hover,
.hp-consent__btn--save:hover{ background: rgba(244,239,230,.14); }

.hp-consent__btn--save{ margin-top: 14px; }

.hp-consent__more{
  flex: 0 0 auto;
  background: none; border: 0; padding: 13px 6px;
  font: inherit; font-size: 13px; color: var(--hpc-muted);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.hp-consent__more:hover{ color: var(--hpc-paper); }

.hp-consent__btn:focus-visible,
.hp-consent__more:focus-visible,
.hp-consent__text a:focus-visible,
.hp-consent__opt:focus-within{
  outline: 2px solid var(--hpc-acid);
  outline-offset: 3px;
}

/* --- Zweite Ebene ----------------------------------------------------- */
.hp-consent__details{
  margin: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 8px;
}
.hp-consent__details[hidden]{ display: none; }

.hp-consent__opt{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
}
.hp-consent__opt + .hp-consent__opt{ border-top: 1px solid rgba(255,255,255,.09); }
.hp-consent__opt input{
  flex: 0 0 auto; margin: 2px 0 0;
  width: 18px; height: 18px; accent-color: var(--hpc-acid);
  cursor: pointer;
}
.hp-consent__opt input:disabled{ cursor: default; opacity: .55; }
.hp-consent__opt > span{ flex: 1 1 auto; display: block; }
.hp-consent__opt label{
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px;
  cursor: pointer;
}
.hp-consent__opt input:disabled + span label{ cursor: default; }
.hp-consent__opt span span{
  display: block; font-size: 12.5px; line-height: 1.5; color: var(--hpc-muted);
  font-weight: 400;
}

@media (max-width: 560px){
  .hp-consent__actions{ flex-direction: column; align-items: stretch; }
  .hp-consent__btn{ flex: 1 1 auto; width: 100%; }
  .hp-consent__more{ width: 100%; text-align: center; }
}