/* ============================================================
   Consent-Theme "Technisches Datenblatt" fuer vanilla-cookieconsent v3.
   Nutzt die Design-Token aus static/css/style.css (Fallbacks fuer den
   Fall, dass style.css noch nicht geladen ist).

   DSB-Entscheidungspraxis (research_recht.md Punkt 1): "Nur notwendige"
   ist optisch GLEICHWERTIG zu "Alle akzeptieren" — deshalb erhalten
   Primaer- UND Sekundaer-Buttons denselben Signal-Orange-Stil (gleiche
   Groesse, Farbe, Schriftgroesse, gleiche Ebene).
   ============================================================ */

#cc-main {
  /* Typografie + Kanten wie .btn / .card */
  --cc-font-family: var(--font-text, 'IBM Plex Sans', system-ui, sans-serif);
  --cc-modal-border-radius: var(--radius, 3px);
  --cc-btn-border-radius: var(--radius, 3px);
  --cc-modal-transition-duration: .18s;

  /* Grundflaeche (Einstellungs-Dialog): Karte auf Papier */
  --cc-bg: var(--white, #FDFCFA);
  --cc-primary-color: var(--ink, #1E242C);
  --cc-secondary-color: var(--ink-70, #454E5B);
  --cc-separator-border-color: var(--line, #D9D4C7);
  --cc-link-color: var(--accent, #E4570F);
  --cc-overlay-bg: rgba(30, 36, 44, .55);

  /* BEIDE Buttons der ersten Ebene: Primaer-Stil Signal-Orange */
  --cc-btn-primary-bg: var(--accent, #E4570F);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--accent, #E4570F);
  --cc-btn-primary-hover-bg: var(--accent-deep, #C2470A);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--accent-deep, #C2470A);
  /* Sicherheitsnetz: sollte die Lib doch einen Sekundaer-Stil vergeben,
     sieht er exakt gleich aus (keine optische Hierarchie). */
  --cc-btn-secondary-bg: var(--accent, #E4570F);
  --cc-btn-secondary-color: #fff;
  --cc-btn-secondary-border-color: var(--accent, #E4570F);
  --cc-btn-secondary-hover-bg: var(--accent-deep, #C2470A);
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: var(--accent-deep, #C2470A);

  /* Kategorie-Bloecke + Schalter im Einstellungs-Dialog */
  --cc-cookie-category-block-bg: var(--paper, #F4F2EC);
  --cc-cookie-category-block-border: var(--line, #D9D4C7);
  --cc-cookie-category-block-hover-bg: var(--paper-deep, #EAE7DE);
  --cc-cookie-category-block-hover-border: var(--line, #D9D4C7);
  --cc-cookie-category-expanded-block-bg: var(--white, #FDFCFA);
  --cc-cookie-category-expanded-block-hover-bg: var(--paper-deep, #EAE7DE);
  --cc-toggle-on-bg: var(--accent, #E4570F);
  --cc-toggle-off-bg: var(--ink-45, #7A828F);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-readonly-bg: var(--ink-70, #454E5B);
  --cc-toggle-readonly-knob-bg: var(--steel-light, #E4E6E9);

  --cc-footer-bg: var(--paper, #F4F2EC);
  --cc-footer-color: var(--ink-70, #454E5B);
  --cc-footer-border-color: var(--line, #D9D4C7);
}

/* Banner erste Ebene: Tinte-Hintergrund wie .section--dark */
#cc-main .cm {
  --cc-bg: var(--ink, #1E242C);
  --cc-primary-color: var(--steel-light, #E4E6E9);
  --cc-secondary-color: #B8BEC7;
  --cc-separator-border-color: #39414C;
  --cc-footer-bg: #171C23;
  --cc-footer-color: #B8BEC7;
  --cc-footer-border-color: #39414C;
  border-top: 2px solid var(--accent, #E4570F);
}

/* Titel in Display-Schrift wie h1-h3 (Versalien, kondensiert) */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Buttons wie .btn: Display-Schrift, Versalien, kantig */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Cookie-Tabelle: Messwerte in Mono, wie .spec-sheet */
#cc-main .pm__table-td,
#cc-main .pm__table-th {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: .78rem;
}

/* Fokus-Ring im Website-Stil */
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .cm__close:focus-visible,
#cc-main .pm__close-btn:focus-visible {
  outline: 2px solid var(--accent, #E4570F);
  outline-offset: 2px;
}