/* Leseseiten. Gemeinsame Farben und Schrift aus basis.css. */
body { background: var(--grund); font-size: 16px; line-height: 1.75; }
header { display: flex; align-items: center; gap: 22px; padding: 22px max(24px, calc((100vw - 800px) / 2)); background: linear-gradient(120deg, var(--gruen), var(--gruen-tief)); color: var(--hero-text); }
header h1 { font-size: 18px; letter-spacing: -.01em; font-weight: 500; }
header .logo { height: 48px; width: auto; }
main { display: block; width: min(800px, calc(100% - 32px)); max-width: 800px; margin: 32px auto 64px; padding: 40px; perspective: none; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 18px; box-shadow: var(--schatten); }
h2 { font-size: 20px; letter-spacing: -.02em; color: var(--gruen); margin: 30px 0 12px; }
main > h2:first-child { margin-top: 0; }
p, li { margin: 0 0 14px; }
ul, ol { padding-left: 24px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 16px 0; overflow-wrap: anywhere; }
th, td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rahmen); }
th { background: var(--beige-zart); color: var(--gruen); }
.zurueck { display: inline-block; padding: 10px 0; margin-top: 20px; }
a:focus-visible { outline: 3px solid var(--holz); outline-offset: 3px; }
@media (max-width: 640px) { header { padding: 18px; gap: 14px; } header h1 { font-size: 16px; } main { padding: 24px 20px; margin-top: 20px; } }