/* ==========================================================================
   Jobriver v2 – Cookie-Richtlinie (/cookies, Entwurf /cookies-2)
   Ergänzt die Rechtstext-Vorlage (service-2.css): Kategorie-Karten mit
   Schaltern, Cookie-Steckbriefe, Speichern-Leiste. Nur Tokens (hell/dunkel).
   ========================================================================== */

.lg-body .cookie-section { margin: 20px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.lg-body .cookie-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; background: var(--tint); border-bottom: 1px solid var(--line); }
.lg-body .cookie-section__title-group { min-width: 0; }
.lg-body .cookie-section__title { margin: 0 0 4px; font-size: 1.125rem; }
.lg-body .cookie-section__subtitle { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.lg-body .cookie-section__body { padding: 20px 22px 6px; }
.lg-body .cookie-section__desc { font-size: .9375rem; }

/* Schalter: echtes Kontrollkästchen bleibt fokussierbar, nur optisch versteckt */
.cookie-section__toggle { display: flex; align-items: center; gap: 10px; flex: none; }
.cookie-section__toggle label { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.cookie-section__toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.cookie-section__toggle input:disabled { cursor: not-allowed; }
.cookie-section__slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background-color .2s; pointer-events: none; }
.cookie-section__slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(21, 17, 31, .25); transition: transform .2s var(--ease); }
.cookie-section__toggle input:checked + .cookie-section__slider { background: var(--brand); }
.cookie-section__toggle input:checked + .cookie-section__slider::before { transform: translateX(20px); }
.cookie-section__toggle input:indeterminate + .cookie-section__slider { background: var(--brand-200); }
.cookie-section__toggle input:indeterminate + .cookie-section__slider::before { transform: translateX(10px); }
.cookie-section__toggle input:disabled + .cookie-section__slider { opacity: .6; }
.cookie-section__toggle input:focus-visible + .cookie-section__slider { outline: 2.5px solid var(--brand); outline-offset: 3px; }
.cookie-section__badge { padding: 3px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* Einzelne Dienste */
.cookie-subtoggles { display: grid; margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--r); }
.cookie-subtoggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.cookie-subtoggle + .cookie-subtoggle { border-top: 1px solid var(--line); }
.cookie-subtoggle__name { font-size: .9375rem; font-weight: 550; color: var(--ink); }

/* Steckbriefe */
.cookie-info { margin: 0 0 18px; }
.lg-body .cookie-info__heading { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lg-body .cookie-info__table { margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .875rem; table-layout: fixed; }
.lg-body .cookie-info__table th, .lg-body .cookie-info__table td { padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.lg-body .cookie-info__table tr:last-child th, .lg-body .cookie-info__table tr:last-child td { border-bottom: 0; }
.lg-body .cookie-info__label { width: 34%; background: var(--tint); font-weight: 550; color: var(--ink); }
.lg-body .cookie-info__hosts { margin: 0; font-size: .875rem; overflow-wrap: anywhere; color: var(--ink-2); }

/* Speichern */
.cookie-save-bar { position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: flex-end; width: fit-content; max-width: 100%; margin: 24px 0 10px auto; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.cookie-save-btn:disabled { opacity: .75; cursor: default; }
.cookie-save-success { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--r); background: rgba(18, 184, 134, .12); color: var(--ink); font-size: .9375rem; font-weight: 550; }
.cookie-save-success:not(.is-visible) { display: none; }
.cookie-save-success svg { flex: none; color: var(--mint); }
.lg-body .cookie-updated { font-size: .875rem; color: var(--muted); }

/* Platz für den „Nach oben“-Knopf (fest unten rechts), sobald der Text die Breite füllt */
@media (max-width: 1080px) {
    .cookie-save-bar { margin-right: 60px; }
}
@media (max-width: 560px) {
    .lg-body .cookie-section__header, .lg-body .cookie-section__body { padding-left: 16px; padding-right: 16px; }
    .lg-body .cookie-info__table, .lg-body .cookie-info__table tbody, .lg-body .cookie-info__table tr, .lg-body .cookie-info__table th, .lg-body .cookie-info__table td { display: block; width: auto; }
    .lg-body .cookie-info__table th { padding-bottom: 2px; border-bottom: 0; background: none; font-size: .75rem; color: var(--muted); }
    .lg-body .cookie-info__table td { padding-top: 0; }
    .cookie-save-bar { width: auto; margin: 24px 0 10px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .cookie-save-bar .btn { width: 100%; }
    .lg-body .cookie-section__header { flex-wrap: wrap; }
    .lg-body .cookie-section__body { padding-left: 12px; padding-right: 12px; }
    .lg-body .cookie-info__table td { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-section__slider, .cookie-section__slider::before { transition: none; }
}
@media print {
    .cookie-section__toggle, .cookie-subtoggles, .cookie-save-bar, .cookie-save-success { display: none !important; }
}