/* Consent-Karte — Anmutung nach den Vorlagen aus dem CRA-Portal, umgesetzt mit
 * den Farben der HEPRO-Website.
 *
 * Die Mechanik kommt aus cookieconsent v3 (lib/cookieconsent-3.1.0.js), die
 * Gestaltung ausschliesslich hier. Grundlage sind die CSS-Variablen der
 * Bibliothek; nur wo Variablen nicht ausreichen (roter Balken, Kekssymbol,
 * Karte unten rechts statt zentriert), folgen gezielte Regeln.
 *
 * Farben der Website (gemessen im Template-CSS):
 *   #cd1619  Akzent (Navigation, Kontaktknoepfe, 6-px-Balken)
 *   #3c3c3b  Textfarbe
 *   #ddd     Rahmen
 */

:root {
  --hepro-rot: #cd1619;
  --hepro-rot-dunkel: #a51114;
  --hepro-text: #3c3c3b;
  --hepro-rahmen: #ddd;

  /* --- Variablen der Bibliothek auf die Website umstellen --- */
  --cc-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cc-bg: #fff;
  --cc-primary-color: var(--hepro-text);
  --cc-secondary-color: #6b6b6a;
  --cc-modal-border-radius: 10px;
  --cc-btn-border-radius: 4px;
  --cc-modal-margin: 16px;
  --cc-link-color: var(--hepro-rot);
  --cc-separator-border-color: var(--hepro-rahmen);

  /* Beide Hauptknoepfe absichtlich GLEICH gestaltet: weisser Grund, roter
   * Rand, rote Schrift. Vorgabe des Auftraggebers 2026-08-26: "Alles ablehnen"
   * und "Alles zulassen" muessen optisch gleichrangig sein, keiner
   * auffaelliger als der andere. */
  --cc-btn-primary-bg: #fff;
  --cc-btn-primary-color: var(--hepro-rot);
  --cc-btn-primary-border-color: var(--hepro-rot);
  --cc-btn-primary-hover-bg: var(--hepro-rot);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--hepro-rot);

  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: var(--hepro-rot);
  --cc-btn-secondary-border-color: var(--hepro-rot);
  --cc-btn-secondary-hover-bg: var(--hepro-rot);
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: var(--hepro-rot);

  /* Schalter: aus = grau, ein = HEPRO-Rot */
  --cc-toggle-on-bg: var(--hepro-rot);
  --cc-toggle-off-bg: #b5b5b4;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-enabled-icon-color: var(--hepro-rot);
  --cc-toggle-disabled-icon-color: #b5b5b4;

  --cc-cookie-category-block-bg: #f7f7f7;
  --cc-cookie-category-block-border: var(--hepro-rahmen);
  --cc-cookie-category-block-hover-bg: #f0f0f0;
  --cc-cookie-category-block-hover-border: #cfcfcf;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #f0f0f0;

  --cc-footer-bg: #fff;
  --cc-footer-color: var(--hepro-text);
  --cc-footer-border-color: var(--hepro-rahmen);

  /* Kein abdunkelndes Overlay: die Karte soll die Seite nicht blockieren. */
  --cc-overlay-bg: transparent;
}

/* ------------------------------------------------------------------ Karte
 * Das Einstellungsfenster der Bibliothek wird als kleine Karte unten rechts
 * gezeigt, nicht als zentriertes Modal. Beim ersten Besuch ist es die Karte
 * aus der Vorlage; spaeter oeffnet es der runde Knopf.
 */
#cc-main .pm-overlay {
  background: transparent !important;
  pointer-events: none;
}

#cc-main .pm-wrapper {
  align-items: flex-end;
  justify-content: flex-end;
}

#cc-main .pm {
  max-width: 420px;
  width: calc(100vw - 32px);
  max-height: min(80vh, 620px);
  margin: 0 16px 16px 0;
  border-radius: 10px;
  border: 1px solid var(--hepro-rahmen);
  /* Weicher Schatten wie in der Vorlage */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Roter Balken links ueber die volle Hoehe — derselbe Griff, den die
   * Website unter der Navigation verwendet. */
  border-left: 5px solid var(--hepro-rot);
  pointer-events: auto;
  font-size: 14px;
  color: var(--hepro-text);
}

/* Kekssymbol vor der Ueberschrift. Als eigenes SVG im Projekt, kein CDN und
 * keine Symbolschrift (die Glyphicon-Schriften fehlen ohnehin, siehe B-9). */
#cc-main .pm__header {
  padding: 18px 20px 12px 20px;
  border-bottom: none;
  align-items: center;
}

#cc-main .pm__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hepro-text);
}

#cc-main .pm__title::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-image: url("keks.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#cc-main .pm__body {
  padding: 0 20px 8px 20px;
}

#cc-main .pm__section-desc,
#cc-main .pm__section p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hepro-text);
}

#cc-main .pm__section--toggle .pm__section-title {
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
}

#cc-main .pm__footer {
  padding: 14px 20px 18px 20px;
  border-top: 1px solid var(--hepro-rahmen);
  display: block;
}

/* Knoepfe: beide Hauptknoepfe gleich gross, gleiche Form, gleiche Farbe.
 * "Auswahl speichern" steht darunter und ist als dritte, ruhigere Handlung
 * erkennbar — ohne dass einer der beiden anderen hervorsticht. */
#cc-main .pm__btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#cc-main .pm__btn {
  flex: 1 1 auto;
  min-width: 130px;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 14px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
}

#cc-main .pm__btn--secondary {
  flex: 1 1 100%;
  font-weight: 400;
  border-color: var(--hepro-rahmen);
  color: var(--hepro-text);
}
#cc-main .pm__btn--secondary:hover {
  background: #f2f2f2;
  color: var(--hepro-text);
  border-color: #c9c9c9;
}

#cc-main .pm__badge { display: none; }

/* Das kleine Hinweisfenster der Bibliothek wird nie gezeigt: Beim ersten
 * Besuch erscheint direkt die Karte mit den beiden Schaltern, damit die
 * Entscheidung je Dienst ohne Zwischenschritt moeglich ist. Erzeugt wird es
 * trotzdem (lazyHtmlGeneration: false), weil die Karte davon abhaengt. */
#cc-main .cm-wrapper,
#cc-main .cm { display: none !important; }

/* Link zur Datenschutzerklaerung: rot, unterstrichen — wie in der Vorlage */
#cc-main a {
  color: var(--hepro-rot);
  text-decoration: underline;
}
#cc-main a:hover {
  color: var(--hepro-rot-dunkel);
}

/* --------------------------------------------------- Runder Knopf (Widerruf)
 * Dauerhaft sichtbar, unten rechts. Er ist der Widerrufsweg (OP-15); ein
 * Link im Fussbereich entfaellt dadurch.
 */
.hepro-consent-knopf {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483646;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--hepro-rahmen);
  border-radius: 50%;
  background: #fff url("keks.svg") no-repeat center / 24px 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: none;
}
.hepro-consent-knopf:hover,
.hepro-consent-knopf:focus-visible {
  border-color: var(--hepro-rot);
  box-shadow: 0 4px 18px rgba(205, 22, 25, 0.28);
}
.hepro-consent-knopf:focus-visible {
  outline: 2px solid var(--hepro-rot);
  outline-offset: 2px;
}
/* Solange die Karte offen ist, waere der Knopf daneben verwirrend. */
.hepro-consent-offen .hepro-consent-knopf { display: none; }

/* --------------------------------------------------------------- Mobil
 * Vorgabe: darf keine Inhalte verdecken. Der Knopf ist kleiner und sitzt
 * etwas hoeher, damit er den "nach oben"-Pfeil der Website nicht ueberdeckt;
 * die Karte nutzt die Breite aus und laesst oben Luft.
 */
@media (max-width: 767px) {
  .hepro-consent-knopf {
    width: 40px;
    height: 40px;
    right: 12px;
    bottom: 68px;
    background-size: 21px 21px;
  }
  #cc-main .pm {
    max-width: none;
    width: calc(100vw - 24px);
    margin: 0 12px 12px 12px;
    max-height: 78vh;
    font-size: 14px;
  }
  #cc-main .pm__btn { min-width: 120px; }
}

/* Nutzer, die weniger Bewegung wollen */
@media (prefers-reduced-motion: reduce) {
  #cc-main .pm { transition: none !important; }
}