/* ==========================================================================
   12 – RECHTLICHES (Impressum, Datenschutzerklärung)
   ========================================================================== */

.re-hero { background: var(--gray-lt); border-bottom: 1px solid var(--line); padding: 48px 40px; }
.re-hero-inner { max-width: 760px; margin: 0 auto; }
.re-breadcrumb { font-size: 13px; color: var(--gray); margin-bottom: 16px; }
.re-breadcrumb a { color: var(--gray); text-decoration: none; }
.re-breadcrumb a:hover { color: var(--blue); }
.re-hero .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.re-hero .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blue); }
.re-hero h1 { font-size: clamp(1.8rem,3.4vw,2.4rem); font-weight: 700; color: var(--black); }

.re-inhalt { max-width: 760px; }
.re-inhalt h2 { font-size: 1.2rem; font-weight: 700; color: var(--black); margin: 40px 0 14px; scroll-margin-top: 100px; }
.re-inhalt h2:first-child { margin-top: 0; }
.re-inhalt p { font-size: 15px; line-height: 1.75; color: var(--gray); margin-bottom: 14px; }
.re-inhalt ul { margin: 0 0 14px; padding-left: 22px; }
.re-inhalt li { font-size: 15px; line-height: 1.7; color: var(--gray); }
.re-inhalt a { color: var(--blue); }
.re-inhalt strong { color: var(--black); }

.re-box { background: var(--blue-lt); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; padding: 18px 22px; font-size: 14px; line-height: 1.6; color: var(--black); margin: 20px 0; }
.re-box--pruefhinweis { background: #fff6e6; border-left-color: #f5a623; color: #6b4a10; }

.ds-toc { background: var(--blue-lt); border-radius: 14px; padding: 26px 30px; margin-bottom: 40px; }
.ds-toc ol { columns: 2; column-gap: 30px; margin: 0; padding-left: 22px; }
.ds-toc li { font-size: 14px; line-height: 1.9; break-inside: avoid; }
.ds-toc a { color: var(--black); text-decoration: none; }
.ds-toc a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 560px) { .ds-toc ol { columns: 1; } }