/* ============================================================
   COOKIE-BANNER — Marken-Optik Conversion Cafe
   ============================================================
   Farben und Schriften stammen aus „Designsystem XL/" und sind
   dieselben wie in den Seiten selbst. Diese Datei überschreibt
   nur das Aussehen der Bibliothek, nie ihr Verhalten.

   Muss NACH cookieconsent.css eingebunden werden.
   ============================================================ */

#cc-main{
  /* Marken-Töne */
  --cc-bg:#ffffff;                       /* Weiß — der Kasten selbst */
  --cc-primary-color:#3a403b;            /* Anthrazit — Überschriften, Text */
  --cc-secondary-color:#4f5753;          /* Fließtext */

  --cc-font-family:"Montserrat","Segoe UI",system-ui,sans-serif;

  --cc-link-color:#a9663b;               /* Terracotta dunkel */

  --cc-separator-border-color:#e2d8c8;
  --cc-section-category-border:#e1e5e4;

  /* Schalter */
  --cc-toggle-on-bg:#687a71;             /* Olivgrün — an */
  --cc-toggle-off-bg:#bdcec8;            /* Salbei — aus */
  --cc-toggle-on-knob-bg:#ffffff;
  --cc-toggle-off-knob-bg:#ffffff;
  --cc-toggle-readonly-bg:#e1e5e4;
  --cc-toggle-readonly-knob-bg:#ffffff;
  --cc-toggle-readonly-knob-icon-color:#687a71;
  --cc-toggle-enabled-icon-color:#ffffff;
  --cc-toggle-disabled-icon-color:#ffffff;

  /* Kategorie-Kästen — Creme auf dem weißen Kasten, sonst wären sie
     weiß auf weiß und damit unsichtbar. */
  --cc-cookie-category-block-bg:#fdf4eb;
  --cc-cookie-category-block-border:#e1e5e4;
  --cc-cookie-category-block-hover-bg:#f4e6d3;
  --cc-cookie-category-block-hover-border:#bdcec8;
  --cc-cookie-category-expanded-block-bg:transparent;
  --cc-cookie-category-expanded-block-hover-bg:#f4e6d3;

  --cc-overlay-bg:rgba(58,64,59,.65);
  --cc-webkit-scrollbar-bg:#bdcec8;
  --cc-webkit-scrollbar-hover-bg:#687a71;

  --cc-footer-bg:#f4e6d3;                /* Sand */
  --cc-footer-color:#6e756f;
  --cc-footer-border-color:#e2d8c8;

  --cc-modal-border-radius:20px;
  --cc-btn-border-radius:999px;          /* Pillen wie überall auf der Seite */
  --cc-pm-toggle-border-radius:999px;
  --cc-z-index:2147483000;
}

/* ---------- Überschriften in der Marken-Schrift ---------- */
#cc-main .cm__title,
#cc-main .pm__title{
  font-family:"Oswald","Segoe UI",system-ui,sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  color:#3a403b;
}
#cc-main .pm__section-title{font-weight:600;color:#3a403b;}

/* „immer an" neben der Überschrift „Notwendig" — eckiger Chip in
   Olivgrün, wie die hinterlegten Überschriften auf den Seiten. */
#cc-main .pflicht{
  display:inline-block;margin-left:.5rem;padding:.1em .45em;
  background:#687a71;color:#fdf4eb;
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  font-size:.68rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;border-radius:0;    /* Chips sind immer eckig */
  vertical-align:middle;
}

/* ---------- Buttons ----------
   „Alle akzeptieren" und „Alle ablehnen" sehen bewusst GLEICH aus:
   gleiche Farbe, gleiche Größe, gleiches Gewicht. Kein Schubsen in
   die eine Richtung — sonst ist die Zustimmung nichts wert.
   (equalWeightButtons in banner.js sorgt zusätzlich für gleiche Breite.) */
#cc-main .cm__btn,
#cc-main .pm__btn{
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:.86rem;letter-spacing:.03em;
  text-transform:uppercase;padding:.85rem 1.2rem;
  transition:background .2s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1);
}
#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover{transform:translateY(-1px);}

/* Beide Hauptknöpfe in Terracotta — identisch. */
#cc-main .cm__btn[data-role="all"],
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"]{
  background:#c57f52;color:#ffffff;border:1.5px solid #c57f52;
}
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover{
  background:#a9663b;border-color:#a9663b;color:#ffffff;
}

/* „Einzeln auswählen" ist die ruhigere dritte Möglichkeit —
   heller, aber gleich groß und gleich gut erreichbar. */
#cc-main .cm__btn[data-role="show"],
#cc-main .pm__btn--secondary{
  background:transparent;color:#3a403b;border:1.5px solid #bdcec8;
}
#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .pm__btn--secondary:hover{
  background:#f4e6d3;border-color:#687a71;color:#3a403b;
}

/* ---------- Fußzeile im Banner ---------- */
#cc-main .cm__link-group a{
  color:#6e756f;text-decoration:underline;text-underline-offset:2px;
}
#cc-main .cm__link-group a:hover{color:#a9663b;}

/* ---------- Abdunklung hinter dem Cookie-Fenster ----------
   Der Einstellungen-Dialog bringt seine eigene Abdunklung mit
   (.pm-overlay), das Cookie-Fenster nicht. Die Bibliothek hätte dafür
   einen Schalter (disablePageInteraction), der aber zusätzlich die
   ganze Seite sperrt — kein Scrollen, kein Klicken, bis entschieden
   ist. Das wollen wir auf einer Lead-Magnet-Seite nicht.

   Deshalb hier nur die Optik: pointer-events:none lässt alle Klicks
   und das Scrollen durch. Die Seite liegt gedimmt darunter, bleibt
   aber vollständig benutzbar. */
#cc-main .cm-wrapper::before{
  content:"";position:fixed;inset:0;z-index:0;
  background:rgba(58,64,59,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--cc-uebergang,ease),visibility .4s var(--cc-uebergang,ease);
}
html.show--consent #cc-main .cm-wrapper::before{opacity:1;visibility:visible;}
/* Der Kasten selbst muss über der Abdunklung liegen */
#cc-main .cm{position:fixed;z-index:1;}

@media (prefers-reduced-motion:reduce){
  #cc-main .cm-wrapper::before{transition:none;}
}

/* ---------- Kasten ---------- */
#cc-main .cm{box-shadow:0 20px 50px rgba(58,64,59,.14);}

/* Der Einstellungen-Dialog geht von Haus aus auf volle Bildschirmhöhe.
   Bei den kurzen Texten hier bliebe darunter eine große leere Fläche —
   deshalb passt er sich dem Inhalt an. Wird der Inhalt länger, greift
   die max-height und der Innenteil wird wieder scrollbar. */
#cc-main .pm--box{height:auto;max-height:calc(100% - 2em);}
#cc-main .cm__desc,
#cc-main .pm__section-desc{line-height:1.6;}

/* Wer „Bewegung reduzieren" eingestellt hat, bekommt keine Animation. */
@media (prefers-reduced-motion:reduce){
  #cc-main .cm__btn:hover,
  #cc-main .pm__btn:hover{transform:none;}
}