:root { --petrol: #0B5563; --koralle: #FF6B4A; --papier: #FBF7F1; --tinte: #13262B; --neben: #4A5D61; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 18px/1.5 "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--petrol); text-underline-offset: .15em; }
.seite { max-width: 880px; margin: 0 auto; padding: 24px 16px 32px; min-height: 100vh; display: flex; flex-direction: column; }
.kopf a { display: inline-block; }
.lockup { height: 44px; width: auto; display: block; }
.inhalt { flex: 1; padding: 56px 0 40px; }
h1 { font-size: clamp(40px, 9vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; color: var(--petrol); }
.saetze { font-size: 21px; max-width: 34em; margin: 0 0 14px; }
.whatsapp { font-size: 19px; font-weight: 700; color: var(--petrol); margin: 0 0 36px; }
.schritte { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.schritte li { background: #FFFFFF; border: 1.5px solid #E3DCD1; padding: 18px 16px; border-radius: 10px; }
.schritte b { display: block; font-size: 15px; color: var(--koralle); margin-bottom: 6px; letter-spacing: .02em; }
.status { font-size: 15px; color: var(--neben); }
.text h1 { font-size: 40px; }
.text h2 { font-size: 20px; margin: 28px 0 6px; }
.text p { max-width: 40em; }
footer.dach { font-size: 14px; color: var(--neben); border-top: 1px solid #E3DCD1; padding-top: 16px; }
footer.dach a { color: var(--neben); }
@media (max-width: 640px) { .schritte { grid-template-columns: 1fr; } .inhalt { padding-top: 36px; } .saetze { font-size: 19px; } .lockup { height: 36px; } }