/* ============================================================
   Einwilligung
   vanilla-cookieconsent bringt sein Aussehen selbst mit, und es
   passt nicht zur Seite. Es lässt sich aber vollständig über
   Variablen steuern, deshalb steht hier keine einzige Regel für
   fremdes Markup, nur eine Übersetzung seiner Token in unsere.

   Die drei Knöpfe stehen im selben Gewicht. Ein hervorgehobenes
   „Alles annehmen" neben einem blassen „Nur das Nötige" wäre
   keine freie Entscheidung, und daran scheitern die meisten
   Banner. Dieselbe Absicht steckt in equalWeightButtons in
   js/einwilligung.js: Beides zusammen hält es gleich.
   ============================================================ */
#cc-main{
  --cc-font-family:var(--body);
  --cc-bg:var(--weiss);
  --cc-primary-color:var(--tinte);
  --cc-secondary-color:var(--text-2);
  --cc-link-color:var(--bordeaux);

  --cc-btn-border-radius:var(--radius);
  --cc-modal-border-radius:var(--radius);
  --cc-pm-toggle-border-radius:20px;

  /* Annehmen und Ablehnen sehen gleich aus: Umriss, keine Füllung, die eine
     Antwort empfiehlt. Der Bordeaux-Knopf bleibt dem Erstgespräch. */
  --cc-btn-primary-bg:transparent;
  --cc-btn-primary-color:var(--tinte);
  --cc-btn-primary-border-color:var(--linie-stark);
  --cc-btn-primary-hover-bg:var(--tinte-10);
  --cc-btn-primary-hover-color:var(--tinte);
  --cc-btn-primary-hover-border-color:var(--stahl);

  --cc-btn-secondary-bg:transparent;
  --cc-btn-secondary-color:var(--tinte);
  --cc-btn-secondary-border-color:var(--linie-stark);
  --cc-btn-secondary-hover-bg:var(--tinte-10);
  --cc-btn-secondary-hover-color:var(--tinte);
  --cc-btn-secondary-hover-border-color:var(--stahl);

  /* Der Schalter trägt die Marke: Hier ist Farbe eine Zustandsangabe,
     keine Empfehlung. */
  --cc-toggle-on-bg:var(--bordeaux);
  --cc-toggle-off-bg:var(--stahl);
  --cc-toggle-on-knob-bg:var(--weiss);
  --cc-toggle-off-knob-bg:var(--weiss);
  --cc-toggle-readonly-bg:var(--linie-stark);
  --cc-toggle-readonly-knob-bg:var(--weiss);
  --cc-toggle-readonly-knob-icon-color:var(--text-3);
  --cc-toggle-enabled-icon-color:var(--weiss);
  --cc-toggle-disabled-icon-color:var(--weiss);

  --cc-separator-border-color:var(--linie);
  --cc-section-category-border:var(--linie);
  --cc-cookie-category-block-bg:var(--papier);
  --cc-cookie-category-block-border:var(--linie);
  --cc-cookie-category-block-hover-bg:var(--tinte-10);
  --cc-cookie-category-block-hover-border:var(--stahl);
  --cc-cookie-category-expanded-block-bg:transparent;
  --cc-cookie-category-expanded-block-hover-bg:var(--tinte-10);

  --cc-footer-bg:var(--papier);
  --cc-footer-color:var(--text-2);
  --cc-footer-border-color:var(--linie);

  --cc-overlay-bg:rgba(17,17,19,.5);
  --cc-webkit-scrollbar-bg:var(--linie);
  --cc-webkit-scrollbar-hover-bg:var(--stahl);

  /* Über dem klebenden Kopf, unter nichts sonst. */
  --cc-z-index:60;
}

/* Die Überschriften in der Hausschrift. Die Bibliothek setzt dafür keine
   Variable, das ist die einzige Stelle, an der ihr Markup hier vorkommt. */
#cc-main .cm__title,
#cc-main .pm__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
}

/* Die Knöpfe der Bibliothek sind 42 Pixel hoch. Zwei fehlen zu den 44, die
   sowohl WCAG 2.5.5 als auch Apples Richtlinie als kleinstes Berührungsziel
   nennen. Auf dem Daumen ist das der Unterschied zwischen Treffen und
   Danebentippen, und es kostet nichts, ihn zu schließen. */
#cc-main .cm__btn,
#cc-main .pm__btn{ min-height:44px; }

/* Der Verweis im Fuß, mit dem sich die Entscheidung zurücknehmen lässt. */
[data-einwilligung-widerruf]{ cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  #cc-main{ --cc-modal-transition-duration:0s; }
}