:root { --ink: #14211c; --paper: #f4f1e8; --green: #73a766; --lime: #c7ef74; --line: color-mix(in srgb, var(--ink) 18%, transparent); }
body { background: var(--paper); color: var(--ink); }
main > article > header, main section, main footer { padding: clamp(4rem, 9vw, 9rem) max(5vw, calc((100vw - 1120px) / 2)); }
main > article > header { min-height: 72vh; display: grid; align-content: center; gap: 1.5rem; background: radial-gradient(circle at 82% 34%, var(--lime), transparent 32%), linear-gradient(120deg, var(--paper) 42%, #dce8bd); }
main > article > header > p:first-child, section > p:first-child { margin: 0; text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; font-weight: 800; }
main > article > header > p:first-child span:nth-child(1)::after { content: "."; color: color-mix(in srgb, var(--ink) 38%, transparent); }
main > article > header > p:first-child span:nth-child(2), main > article > header > p:first-child strong { margin-left: -.22em; }
main > article > header > p:first-child span:nth-child(2)::after { content: "/"; color: color-mix(in srgb, var(--ink) 38%, transparent); }
h1 { max-width: 12ch; margin: 0; font-size: clamp(4rem, 10vw, 9rem); line-height: .82; letter-spacing: -.065em; }
h2 { max-width: 18ch; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .94; letter-spacing: -.045em; }
main > article > header > p:nth-of-type(2) { max-width: 46rem; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.45; }
main aside { max-width: 48rem; display: grid; grid-template-columns: auto 1fr; gap: .8rem 1.2rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, white 68%, transparent); }
main section { border-top: 1px solid var(--line); }
main section > p:not(:first-child), main section > h2 + p { max-width: 46rem; font-size: 1.14rem; line-height: 1.65; }
#zusammenhang { background: #13211b; color: #f4f1e8; }
#zusammenhang figure { margin: 3rem 0; padding: clamp(1.3rem, 4vw, 3rem); border: 1px solid color-mix(in srgb, white 22%, transparent); border-radius: 1.4rem; overflow-x: auto; }
#zusammenhang figure div { display: flex; align-items: center; gap: .8rem; min-width: max-content; margin-top: 1rem; }
#zusammenhang figure strong { padding: .65rem .9rem; border-radius: 999px; background: var(--lime); color: var(--ink); }
#zusammenhang figure span { opacity: .62; }
#zusammenhang > div, #ehrlich dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; background: currentColor; border: 1px solid currentColor; }
#zusammenhang article, #ehrlich dl div { padding: 1.5rem; background: #13211b; }
#ehrlich dl { grid-template-columns: repeat(2, 1fr); color: var(--line); }
#ehrlich dl div { background: var(--paper); color: var(--ink); }
#ehrlich dt { font-weight: 800; margin-bottom: .6rem; }
#ehrlich dd { margin: 0; line-height: 1.55; }
#einstieg ol { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
#einstieg li { counter-increment: step; padding: 1.2rem; background: var(--paper); }
#einstieg li::before { content: "0" counter(step); display: block; margin-bottom: 2rem; color: var(--green); font-weight: 800; }
#einstieg li strong, #einstieg li span { display: block; }
#einstieg li span { margin-top: .6rem; line-height: 1.45; }
#veraenderung { background: var(--lime); }
blockquote { max-width: 44rem; margin: 3rem 0 0; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.18; }
main footer { border-top: 1px solid var(--line); }
main footer > p { max-width: 50rem; font-size: 1.15rem; }
main footer nav { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; margin-top: 2rem; }
@media (max-width: 820px) { #zusammenhang > div, #ehrlich dl, #einstieg ol { grid-template-columns: 1fr; } main aside { grid-template-columns: 1fr; } }