/* about.html — page-specific rules. Nav + :root kommen aus _nav.css. */

.legal-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
    line-height: 1.8;
}

h1 { color: #fff; font-size: 2.4rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
h2 { color: #fff; margin-top: 2.5rem; font-size: 1.4rem; }
a { color: var(--accent); }
.quiet { opacity: 0.6; font-size: 0.85rem; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; }
footer { text-align: center; padding: 2rem 0; font-size: 0.75rem; color: #6b7fa0; border-top: 1px solid var(--border); margin-top: 2rem; }
footer a { color: var(--accent); text-decoration: none; }
code { overflow-wrap: break-word; word-break: break-all; }

.cta-box { text-align: center; padding: 2rem 0; margin-top: 2rem; border-top: 1px solid var(--border); }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-cta-primary { display: inline-block; padding: 0.7rem 1.8rem; background: var(--accent); color: var(--bg); text-decoration: none; border-radius: 4px; font-weight: bold; }
.btn-cta-secondary { display: inline-block; padding: 0.7rem 1.8rem; border: 1px solid rgba(0,200,255,0.5); color: var(--accent); text-decoration: none; border-radius: 4px; font-weight: bold; }

/* --- Responsive --- */
@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .legal-body { padding: 1rem; }
    h1 { font-size: 1.4rem; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons a { width: 80%; text-align: center; }
    footer { line-height: 2.2; }
}