/* ╔══════════════════════════════════════════════════════════════╗ ║ datenschutz.css – Styles für die Datenschutzerklärung ║ ║ ║ ║ Ladereihenfolge im : ║ ║ 1. tokens.css → Design-Tokens (:root) ║ ║ 2. datenschutz.css → diese Datei ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Alle Tokens kommen aus tokens.css – nichts doppelt!*/ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { font-family: var(--font-body); background: var(--clr-bg); color: var(--clr-text); line-height: 1.75; font-size: 1rem; -webkit-font-smoothing: antialiased; } ul { list-style: none; } a { color: var(--clr-primary); text-decoration: none; } a:hover { text-decoration: underline; color: var(--clr-primary-dark); } :focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 3px; } /* ── Back-Button ────────────────────────────────────────── */ .back-bar { position: sticky; top: 0; z-index: 100; background: var(--clr-surface); border-bottom: 3px solid var(--clr-accent); box-shadow: var(--shadow-sm); padding: 0.8rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--clr-text-muted); letter-spacing: 0.04em; text-transform: uppercase; transition: color .2s; } .back-link:hover { color: var(--clr-primary); text-decoration: none; } .back-arrow { font-size: 1rem; } .bar-title { font-family: var(--font-display); font-weight: 900; font-size: 1rem; color: var(--clr-text); margin-left: auto; margin-right: auto; } .bar-logo-accent { color: var(--clr-primary); } /* ── Layout ─────────────────────────────────────────────── */ .page-wrap { max-width: 860px; margin-inline: auto; padding: 3rem 1.5rem 5rem; } /* ── Page-Header ─────────────────────────────────────────── */ .page-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--clr-border); } .page-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-primary); margin-bottom: 0.5rem; } .page-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--clr-text); line-height: 1.15; margin-bottom: 0.5rem; } .page-date { font-size: 0.82rem; color: var(--clr-text-muted); } /* ── Inhaltsverzeichnis ──────────────────────────────────── */ .toc { background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-primary); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; box-shadow: var(--shadow-sm); } .toc-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--clr-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .toc-list { display: flex; flex-direction: column; gap: 0.25rem; } .toc-list a { font-size: 0.88rem; color: var(--clr-text-muted); display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; transition: color .15s; } .toc-list a::before { content: '›'; color: var(--clr-primary); font-weight: 700; flex-shrink: 0; } .toc-list a:hover { color: var(--clr-primary); text-decoration: none; } /* ── Sections ────────────────────────────────────────────── */ .dse-section { margin-bottom: 2.5rem; scroll-margin-top: 80px; } .dse-section h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; color: var(--clr-text); padding-bottom: 0.5rem; border-bottom: 2px solid var(--clr-border); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .dse-section h2 .sec-icon { font-size: 1.1rem; background: var(--clr-primary); color: #fff; width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dse-section h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--clr-text); margin: 1rem 0 0.4rem; } .dse-section p { font-size: 0.92rem; color: var(--clr-text-muted); margin-bottom: 0.75rem; max-width: 72ch; } .dse-section p strong { color: var(--clr-text); } /* ── Listen ──────────────────────────────────────────────── */ .dse-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; padding-left: 0.25rem; } .dse-list li { font-size: 0.91rem; color: var(--clr-text-muted); padding: 0.35rem 0.75rem; border-left: 3px solid var(--clr-border); line-height: 1.6; transition: border-color .15s; } .dse-list li:hover { border-left-color: var(--clr-primary); } .dse-list li strong { color: var(--clr-text); } /* Verschachtelte m-elements Liste (kompakt) */ .dse-detail-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; } .dse-detail-list li { font-size: 0.88rem; color: var(--clr-text-muted); padding: 0.3rem 0; border-bottom: 1px solid var(--clr-border); line-height: 1.6; } .dse-detail-list li:last-child { border-bottom: none; } .dse-detail-list li strong { color: var(--clr-text); } .dse-detail-list li a { font-size: inherit; } /* Glossar */ .dse-glossar { display: flex; flex-direction: column; gap: 0.75rem; } .dse-glossar li { font-size: 0.91rem; color: var(--clr-text-muted); padding: 0.75rem 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); line-height: 1.65; } .dse-glossar li strong { display: block; color: var(--clr-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; } /* ── Wichtig-Hinweis-Box ─────────────────────────────────── */ .info-box { background: #fffbeb; border: 1px solid #fbbf24; border-left: 4px solid var(--clr-accent); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; font-size: 0.88rem; color: #78350f; margin: 0.75rem 0 1rem; display: flex; gap: 0.5rem; align-items: flex-start; } .info-box-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } /* ── Kontakt-Box ─────────────────────────────────────────── */ .contact-box { display: inline-flex; flex-direction:column; gap: 0.4rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1rem 1.5rem; box-shadow: var(--shadow-sm); font-size: 0.92rem; color: var(--clr-text-muted); margin-top: 0.5rem; } .contact-box strong { color: var(--clr-text); font-size: 1rem; } /* ── Siegel ──────────────────────────────────────────────── */ .dse-seal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px dashed var(--clr-border); font-size: 0.78rem; color: var(--clr-text-muted); text-align: center; } .dse-seal a { color: var(--clr-text-muted); } .dse-seal a:hover { color: var(--clr-primary); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 600px) { .page-wrap { padding: 2rem 1rem 4rem; } .back-bar { padding: 0.7rem 1rem; } .bar-title { display: none; } }