/* Cookie-Banner (Cookiebot, eigene Vorlage #cookiebanner) im Look der Seite.
   Die Vorlage bringt Inter, Blau-Verlaeufe und Pillen-Knoepfe mit und haengt ihr
   CSS als adoptedStyleSheet an: das gewinnt bei gleicher Spezifitaet gegen jedes
   Stylesheet der Seite. Darum steht vor jeder Regel `body #cookiebanner`.
   Gleiche Vorlage in der App: dort liegt eine Kopie dieser Regeln in
   FE/PropspectorFrontend/frontend/src/cookiebanner.css. Aenderungen in beiden
   Dateien machen.
   "Nur notwendige" ist bewusst so sichtbar wie "Alle akzeptieren" (dunkel statt
   grau): die Ablehnung darf nicht versteckter sein als die Zustimmung. */

body #cb-overlay { background: color-mix(in srgb, var(--tief) 60%, transparent) !important; }

body #cookiebanner,
body #cookiebanner *,
body #cookiebanner ::before,
body #cookiebanner ::after { font-family: var(--sans); }

body #cookiebanner {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / .28);
}

/* Kopf */
body #cookiebanner #cb-header { background: var(--grund); }
body #cookiebanner #cb-header::after { display: none; }
body #cookiebanner #cb-header-icon { border-radius: var(--radius); background: rgb(255 255 255 / .06); }
body #cookiebanner .cb-title {
  font-family: var(--cond); font-size: 18px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--paper);
}
body #cookiebanner .cb-subtitle { color: var(--nebel); }

/* Reiter */
body #cookiebanner #cb-tabs { background: var(--wash); border-bottom-color: var(--border); }
body #cookiebanner .cb-tab {
  font-family: var(--cond); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
body #cookiebanner .cb-tab:hover { color: var(--navy); background: rgb(0 0 0 / .03); }
body #cookiebanner .cb-tab.cb-tab-active { color: var(--navy); border-bottom-color: var(--navy); }

/* Text */
body #cookiebanner .cb-heading,
body #cookiebanner .cb-about-title {
  font-family: var(--cond); font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--navy);
}
body #cookiebanner .cb-text,
body #cookiebanner .cb-about-text { font-size: 14px; color: var(--text); }
body #cookiebanner .cb-about-text a { color: var(--navy); border-bottom-color: color-mix(in srgb, var(--navy) 35%, transparent); }
body #cookiebanner .cb-about-text a:hover { color: var(--navy); border-bottom-color: var(--navy); }
body #cookiebanner .cb-lastupdated { color: var(--muted); }

/* Schalter */
body #cookiebanner .cb-level-name { color: var(--navy); }
body #cookiebanner .cb-track { background: var(--zart); }
body #cookiebanner .cb-switch input:checked + .cb-track,
body #cookiebanner .cb-switch input:disabled + .cb-track { background: var(--grund); }

/* Knoepfe: wie .btn der Seite */
body #cookiebanner .cb-btn {
  border-radius: var(--radius); padding: 13px 16px;
  font-family: var(--cond); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  box-shadow: none; transition: background .15s, border-color .15s;
}
body #cookiebanner .cb-btn-primary,
body #cookiebanner .cb-btn-primary:hover { background: var(--yellow); background-image: none; color: var(--navy); box-shadow: none; transform: none; }
body #cookiebanner .cb-btn-primary:hover { background: #f2e24a; }
body #cookiebanner .cb-btn-ghost { background: var(--navy); color: var(--paper); }
body #cookiebanner .cb-btn-ghost:hover { background: var(--grund-2); color: var(--paper); }
body #cookiebanner .cb-btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
body #cookiebanner .cb-btn-outline:hover { background: var(--wash); border-color: var(--navy); }

/* Details */
body #cookiebanner .cb-acc-item { border-color: var(--border); border-radius: var(--radius); background: var(--paper); }
body #cookiebanner .cb-acc-item.cb-acc-on { border-color: var(--navy); background: var(--dunst-0); box-shadow: none; }
body #cookiebanner .cb-acc-icon { border-radius: var(--radius); background: var(--wash); color: var(--muted); }
body #cookiebanner .cb-acc-item.cb-acc-on .cb-acc-icon { background: var(--yellow); color: var(--navy); }
body #cookiebanner .cb-acc-name { color: var(--navy); }
body #cookiebanner .cb-acc-badge { border-radius: 4px; background: var(--wash); color: var(--navy); }
body #cookiebanner .cb-acc-desc { color: var(--muted); }
body #cookiebanner .cb-acc-item.cb-acc-open .cb-chevron { color: var(--navy); }
body #cookiebanner .cb-acc-body table { border-color: var(--border); }
body #cookiebanner .cb-acc-body th { background: var(--wash); color: var(--navy); }
body #cookiebanner .cb-acc-body td { color: var(--text); border-top-color: var(--wash); }
body #cookiebanner .cb-acc-body td:first-child { color: var(--navy); }
body #cookiebanner .cb-acc-body tbody tr:nth-child(2n) td { background: var(--dunst-0); }
body #cookiebanner .cb-acc-body tbody tr:hover td { background: var(--wash); }

/* Fuss */
body #cookiebanner #cb-footer { background: var(--paper); border-top-color: var(--wash); }
body #cookiebanner .cb-footer-link { color: var(--muted); }
body #cookiebanner .cb-footer-link:hover { color: var(--navy); }

@media (max-width: 560px) {
  body #cookiebanner { border-radius: var(--radius) var(--radius) 0 0; }
}