/* 5.2 Datenschutz — page-specific styles (prose/breadcrumb/callout live in
   main.css). Tokens only (tokens.css). */

/* Head (breadcrumb + H1) spans the grid; desktop adds a sticky TOC rail
   beside the prose column (spec layout: "(desktop) sticky TOC | PROSE"). */
/* minmax(0,1fr): the single mobile track must not grow to the 560px table
   floor (that widened the whole page at 320 px, WCAG 1.4.10) */
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

/* Spec layout: the TOC is a desktop affordance */
.privacy-toc { display: none; }

@media (min-width: 1024px) {
    .privacy-layout {
        grid-template-columns: 240px minmax(0, 1fr); /* raw px: TOC rail width */
        column-gap: var(--space-2xl);
        align-items: start;
    }
    .privacy-layout__head { grid-column: 1 / -1; }
    .privacy-toc {
        display: block;
        position: sticky;
        top: var(--space-3xl); /* clears the 72px sticky header */
    }
}

.privacy-toc__heading {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-600);
    margin-bottom: var(--space-xs);
}
.privacy-toc__list { list-style: none; padding: 0; margin: 0; }
.privacy-toc__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* raw px: touch target (AA ground rule) */
    font-size: var(--text-sm);
    color: var(--blue-500);
    text-decoration: none;
}
.privacy-toc__list a:hover { color: var(--blue-700); text-decoration: underline; }

/* Anchored section headings clear the sticky site header when jumped to */
.prose [id] { scroll-margin-top: var(--space-3xl); }

/* Unverified value / pending binding text — visible [TODO] placeholder
   (spec: blocking). ink-600 on surface-50: AA ok. */
/* Inline (not inline-block): review markers can be long sentences and must
   wrap with the text; clone keeps the dashed box on every line fragment. */
.legal-todo {
    display: inline;
    background: var(--surface-50);
    border: 1px dashed var(--ink-400);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2xs);
    color: var(--ink-600);
    font-style: italic;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.privacy-lang-notice { font-size: var(--text-sm); color: var(--ink-600); }

.privacy-address { font-style: normal; }

/* Wide tables (cookies, recipients) scroll inside their keyboard-focusable
   box on phones, never the page. Column floors keep words from collapsing
   into one-word lines; the purpose/task column takes the free space. */
.privacy-table { overflow-x: auto; }
.privacy-table table { min-width: 40rem; table-layout: auto; }
.privacy-table th, .privacy-table td { padding: var(--space-xs) var(--space-sm); vertical-align: top; line-height: 1.5; }
.privacy-table thead th {
    background: var(--surface-50);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: bottom;
}
.privacy-table tbody tr:nth-child(even) { background: var(--surface-50); }
.privacy-table th[scope="row"] { font-weight: 600; min-width: 9.5rem; overflow-wrap: break-word; }
/* as narrow as the longest key (protectly_consent), longer names like "Cookies von Calendly" wrap */
#privacy-cookies-table tbody th[scope="row"] { min-width: 0; width: 1%; white-space: normal; overflow-wrap: normal; }
#privacy-cookies-table th:nth-child(2) { min-width: 6.5rem; }
#privacy-cookies-table th:nth-child(3), #privacy-recipients-table th:nth-child(2) { min-width: 11rem; width: 36%; }
#privacy-cookies-table th:nth-child(4) { min-width: 8.5rem; }
#privacy-cookies-table th:nth-child(5) { min-width: 6.5rem; }
#privacy-recipients-table th:nth-child(3) { min-width: 8rem; }
#privacy-recipients-table th:nth-child(4) { min-width: 9rem; }
.privacy-table:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }