@font-face { font-family: 'Onest'; src: url('app/fonts/onest.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url('app/fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root { --seite: #F3F6F2; --tief: #FFFFFF; --hoch: #DFE6E0; --tinte: #16211B; --leise: #5A695F; --signal: #2F9E44; --signal-tinte: #FFFFFF; --linie: #DFE6E0; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.55 'Onest', 'Segoe UI', system-ui, sans-serif; color: var(--tinte); background: radial-gradient(circle at 85% 0%, #E3F4E1, transparent 620px) no-repeat var(--seite); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: 'Bricolage', 'Segoe UI', sans-serif; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.kopf, main, .fuss { width: min(1180px, 100% - 40px); margin-inline: auto; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 10px; font: 600 18px 'Bricolage', sans-serif; text-decoration: none; }
.marke img { border-radius: 8px; }
.kopf nav, .fuss nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; }
.kopf nav a, .fuss nav a { color: var(--leise); text-decoration: none; }
.kopf nav a:hover, .fuss nav a:hover { color: var(--tinte); text-decoration: underline; }

.held { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px 0 72px; }
.held h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 700; margin-bottom: 22px; }
.held-unter { font-size: 19px; color: var(--leise); max-width: 44ch; margin: 0 0 30px; }
.held-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.knopf { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; border: 1px solid var(--linie); text-decoration: none; font-weight: 600; }
.knopf:hover { border-color: var(--leise); }
.knopf { background: #fff; }
.knopf.haupt { background: var(--signal); border-color: var(--signal); color: var(--signal-tinte); font-size: 19px; padding: 14px 24px 14px 20px; }
.knopf.haupt:hover { background: #237A34; border-color: #237A34; }
.knopf.haupt span { display: grid; line-height: 1.2; }
.knopf.haupt small { font-size: 12.5px; font-weight: 500; opacity: .8; }
.held-hinweis { font-size: 14px; color: var(--leise); max-width: 50ch; margin: 22px 0 0; }
.held-hinweis b { color: var(--tinte); font-weight: 600; }
.held-bild { margin: 0; }
.held-bild img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--hoch); box-shadow: 0 24px 70px rgba(22, 33, 27, .18); }

.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.drei div { padding: 34px 28px 34px 0; }
.drei div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
.drei h2 { font-size: 26px; margin-bottom: 10px; }
.drei p { margin: 0; color: var(--leise); }

.schritte, .fragen { padding: 72px 0 0; max-width: 760px; }
.schritte h2, .fragen h2 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 26px; }
.schritte ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 18px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 54px 1fr; align-items: baseline; color: var(--leise); }
.schritte li::before { content: counter(s); font: 700 34px 'Bricolage', sans-serif; color: var(--signal); }
.schritte li b { color: var(--tinte); font-weight: 600; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; padding: 16px 30px 16px 0; font-weight: 600; list-style: none; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 500 24px 'Bricolage', sans-serif; color: var(--signal); }
.fragen details[open] summary::after { content: '–'; }
.fragen details p { margin: 0 0 18px; color: var(--leise); max-width: 62ch; }

.fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 64px 0 34px; font-size: 14px; color: var(--leise); }

.recht { max-width: 720px; padding: 30px 0 0; }
.recht h1 { font-size: clamp(36px, 6vw, 54px); margin-bottom: 10px; }
.recht h2 { font-size: 24px; margin: 38px 0 10px; }
.recht p, .recht li { color: var(--leise); }
.recht b { color: var(--tinte); font-weight: 600; }
.recht table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.recht th, .recht td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-top: 1px solid var(--linie); }
.recht th { width: 32%; font-weight: 600; color: var(--tinte); }
.recht td { color: var(--leise); }

@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; gap: 34px; padding-top: 24px; }
  .drei { grid-template-columns: 1fr; }
  .drei div, .drei div + div { padding: 24px 0; border-left: 0; }
  .drei div + div { border-top: 1px solid var(--linie); }
  .recht th, .recht td { display: block; width: 100%; } .recht td { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.recht ul { padding-left: 20px; }
.recht li { margin: 4px 0; }