/* ÖCB Einwilligungsbanner · Stand 04.11.2026 · lädt nur über assets/js/consent.js */
.oecb-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 10000;
    max-width: 44rem;
    margin: 0 auto;
    background: #0B2030;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
}
.oecb-consent[hidden] { display: none; }
.oecb-consent-inner {
    padding: 1.25rem 1.25rem 1rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.oecb-consent-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
}
.oecb-consent-title:focus { outline: none; }
.oecb-consent-title:focus-visible { outline: 3px solid #A2CF5C; outline-offset: 3px; }
.oecb-consent-text { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.9); }
.oecb-consent-details[hidden] { display: none; }
.oecb-consent-fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.oecb-consent-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.oecb-consent-option[hidden] { display: none; }
.oecb-consent-option input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: #A2CF5C;
}
.oecb-consent-option label { display: flex; flex-direction: column; gap: 0.15rem; cursor: pointer; }
.oecb-consent-option label strong { color: #FFFFFF; font-weight: 700; }
.oecb-consent-option label span { color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; }
.oecb-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Ablehnen und Zustimmen sind bewusst gleich gestaltet (keine Lenkung). */
.oecb-consent-btn {
    flex: 1 1 10rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 2px solid #A2CF5C;
    border-radius: 999px;
    background: #A2CF5C;
    color: #0B2030;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.oecb-consent-btn[hidden] { display: none; }
.oecb-consent-btn-ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }
.oecb-consent-btn:hover { filter: brightness(1.06); }
.oecb-consent-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.oecb-consent-links { margin: 0.75rem 0 0; font-size: 0.85rem; }
.oecb-consent-links a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.oecb-consent-links a:focus-visible { outline: 3px solid #A2CF5C; outline-offset: 2px; }
.oecb-consent-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Platzhalter für externe Inhalte */
.oecb-consent-placeholder {
    padding: 1.25rem;
    border: 1px dashed #94A3B8;
    border-radius: 12px;
    background: #F1F5F9;
    color: #0B2030;
}
.oecb-consent-placeholder p { margin: 0 0 0.75rem; }
.oecb-consent-placeholder-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.oecb-consent-placeholder .oecb-consent-btn { flex: 0 1 auto; }
.oecb-consent-placeholder .oecb-consent-btn-ghost { color: #133854; border-color: #133854; }
.oecb-consent-placeholder a { color: #225C87; }
@media (max-width: 480px) {
    .oecb-consent { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; font-size: 0.9rem; }
    .oecb-consent-inner { padding: 1rem; }
    .oecb-consent-text { margin-bottom: 0.75rem; }
    .oecb-consent-btn { flex: 1 1 calc(50% - 0.25rem); min-height: 44px; padding: 0.5rem 0.75rem; }
    .oecb-consent-btn[data-consent-action="settings"],
    .oecb-consent-btn[data-consent-action="save"] { order: 3; flex-basis: 100%; }
}
/* r5 Punkt 02: ab 861 px eine Leiste ueber die ganze Breite am unteren Rand. Text links, drei gleich grosse Knoepfe rechts, Details ueber die volle Breite. */
@media (min-width: 861px) {
    .oecb-consent { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-width: 1px 0 0; border-radius: 0; box-shadow: 0 -12px 32px -14px rgba(0, 0, 0, 0.5); }
    .oecb-consent-inner {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) auto;
        grid-template-areas: "title actions" "text actions" "links actions" "details details";
        column-gap: 2rem;
        align-content: center;
        padding: 1.25rem max(1.5rem, calc((100% - 75rem) / 2)) 1.25rem;
    }
    .oecb-consent-title { grid-area: title; justify-self: start; }
    .oecb-consent-text { grid-area: text; max-width: 52rem; margin-bottom: 0.75rem; }
    .oecb-consent-links { grid-area: links; margin: 0; }
    .oecb-consent-details { grid-area: details; margin-top: 0.75rem; }
    .oecb-consent-actions { grid-area: actions; align-self: center; display: grid; grid-template-columns: repeat(3, minmax(10.5rem, 1fr)); gap: 0.75rem; }
    .oecb-consent-btn { min-width: 10.5rem; width: 100%; }
    /* Ist "Einstellungen" offen, steht "Auswahl speichern" unter "Alle akzeptieren" statt davor. */
    .oecb-consent-btn[data-consent-action="save"] { order: 4; grid-column: 3; }
}
@media (prefers-reduced-motion: no-preference) {
    .oecb-consent:not([hidden]) { animation: oecb-consent-in 0.2s ease-out; }
    @keyframes oecb-consent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media print { .oecb-consent { display: none !important; } }