/*
 * Einwilligungsbanner und Einstellungsseite (P17, docs/Einwilligung_01.md). Eingebunden über den Slot
 * head.stylesheets (ConsentBannerContribution). Nicht modal: kein Hintergrund, die Seite bleibt bedienbar;
 * consent.js setzt --consent-banner-height, damit das Seitenende nicht verdeckt bleibt.
 * „Alle akzeptieren“ und „Nur notwendige“ sind gleich gestaltet (beide shop-button-primary, gleiche Breite).
 */
.consent-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    max-height: min(85vh, 40rem);
    overflow-y: auto;
    color: var(--shop-text);
    background: var(--shop-canvas);
    border-top: 3px solid var(--shop-navy);
    box-shadow: var(--shop-shadow-lg);
}
.consent-banner[hidden] { display: none; }
.consent-banner:focus { outline: none; }
.consent-banner:focus-visible .consent-banner__title { outline: 3px solid var(--shop-focus-ring); outline-offset: 2px; }
.consent-banner__inner {
    display: grid;
    gap: 1rem 2rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem var(--shop-gutter, 1rem);
}
.consent-banner__title { margin: 0 0 .35rem; font-size: var(--shop-text-lg); line-height: 1.3; }
.consent-banner__text { margin: 0; font-size: var(--shop-text-sm); }
.consent-banner__text a, .consent-settings__text a { color: var(--shop-navy); text-decoration: underline; }
.consent-banner__details { margin: .75rem 0 0; padding: 0; border: 0; }
.consent-banner__actions { display: flex; flex-direction: column; gap: .5rem; align-self: end; }
.consent-banner__actions .consent-button { width: 100%; }
.consent-banner__actions .consent-button[hidden] { display: none; }
.consent-category { padding: .6rem 0; border-top: 1px solid var(--shop-line); }
.consent-category:first-of-type { border-top: 0; }
.consent-category .form-check { margin-bottom: .15rem; }
.consent-category__label { font-weight: 700; }
.consent-category__state { font-weight: 400; color: var(--shop-text-muted); }
.consent-category__description { margin: 0 0 0 1.5em; font-size: var(--shop-text-sm); color: var(--shop-text-muted); }
.consent-category .form-check-input:disabled ~ .form-check-label { opacity: 1; }
body.has-consent-banner { padding-bottom: var(--consent-banner-height, 0); }

@media (min-width: 768px) {
    .consent-banner__inner { grid-template-columns: minmax(0, 1fr) 15rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* Einstellungsseite (/datenschutz-einstellungen), ohne JavaScript bedienbar. */
.consent-settings { max-width: 48rem; padding-top: 2rem; padding-bottom: 3rem; }
.consent-settings__current { font-size: var(--shop-text-sm); color: var(--shop-text-muted); }
.consent-settings__categories { margin: 1.5rem 0; padding: 0; border: 0; }
.consent-settings__legend { margin-bottom: .5rem; font-size: var(--shop-text-lg); font-weight: 700; }
.consent-settings__actions { max-width: 20rem; }
@media (min-width: 768px) {
    .consent-settings__actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
    .consent-settings__actions .consent-button { width: auto; min-width: 12rem; }
}

/* Zuletzt angesehen (P15): lange Überschriften umbrechen statt die Seite zu verbreitern (Karten-Stile aus widgets.css). */
.widget-recently-viewed .widget__heading h2 { min-width: 0; overflow-wrap: anywhere; }

/* Kontrollkästchen in CI-Farbe und mit Zielgröße 24 px (Design-Review a62) */
.consent-category .form-check { display: flex; align-items: flex-start; gap: .6rem; padding-left: 0; }
.consent-category .form-check-input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0; border-color: var(--shop-line-strong); }
.consent-category .form-check-input:checked { border-color: var(--shop-navy); background-color: var(--shop-navy); }
.consent-category .form-check-input:focus { border-color: var(--shop-navy); box-shadow: 0 0 0 3px var(--shop-navy-focus); }
.consent-category .form-check-label { padding-top: .1rem; }