:root { --haupt: #1d4ed8; --dunkel: #0f172a; --grau: #f1f5f9; --linie: #e2e8f0; --text: #0f172a; --leise: #475569; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: #fff; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--haupt); }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 1rem; }
h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.breite { max-width: 1080px; margin: 0 auto; padding: 0 1.2rem; }
.breite.schmal { max-width: 640px; }

.seite-kopf { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--linie); backdrop-filter: blur(6px); }
.seite-kopf .breite { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--dunkel); text-decoration: none; }
.seite-kopf nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
.seite-kopf nav a:not(.knopf) { color: var(--leise); text-decoration: none; }
.seite-kopf nav a:not(.knopf):hover { color: var(--haupt); }
@media (max-width: 640px) { .seite-kopf nav a:not(.knopf) { display: none; } }

.knopf { display: inline-block; background: var(--haupt); color: #fff; padding: .5rem 1rem; border-radius: 10px; text-decoration: none; font: inherit; font-weight: 600; border: 0; cursor: pointer; }
.knopf:hover { filter: brightness(1.1); }
.knopf.gross { padding: .75rem 1.4rem; font-size: 1.05rem; }
.knopf.hell { background: #fff; color: var(--haupt); border: 1px solid var(--haupt); }

.held { background: linear-gradient(180deg, #eff6ff, #fff); padding: 3.5rem 0 3rem; }
.lead { font-size: 1.15rem; color: var(--leise); max-width: 46rem; }

.abschnitt { padding: 3rem 0; }
.abschnitt.grau { background: var(--grau); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; }
.raster article { border: 1px solid var(--linie); border-radius: 14px; padding: 1.1rem 1.2rem; background: #fff; }
.raster p { margin: 0; color: var(--leise); }
.schritte { padding-left: 1.3rem; }
.schritte li { margin: .6rem 0; }

.formular { display: grid; gap: .8rem; }
.formular label { display: grid; gap: .25rem; font-weight: 600; font-size: .95rem; }
.formular input, .formular textarea { font: inherit; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: 8px; width: 100%; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--haupt); outline-offset: 1px; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung-form { min-height: 1.4rem; margin: 0; font-weight: 600; }
.meldung-form.ok { color: #166534; }
.meldung-form.fehler { color: #b91c1c; }

.seite-fuss { border-top: 1px solid var(--linie); padding: 1.4rem 0; color: var(--leise); font-size: .9rem; }
.seite-fuss .breite { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.text-seite { padding: 2.5rem 0 4rem; max-width: 760px; }
.text-seite h1 { font-size: 1.9rem; }
.text-seite h2 { font-size: 1.2rem; margin-top: 1.8rem; }
.platzhalter { background: #fef9c3; padding: 0 .25rem; border-radius: 3px; }

.text-seite h3 { font-size: 1.05rem; margin: 1.2rem 0 .3rem; }
.text-seite ul { padding-left: 1.3rem; }
.text-seite li { margin: .3rem 0; }
.fuss-links { margin-top: 2rem; color: var(--leise); }
.tabellenhuelle { overflow-x: auto; }
table.vertrag { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.vertrag th, table.vertrag td { border: 1px solid var(--linie); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.f { background: #fef9c3; padding: 0 .2rem; border-radius: 3px; }
.f.gefuellt { background: none; font-weight: 600; }
.unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.5rem 0; }
.unterschriften .linie { border-bottom: 1px solid #000; margin-top: 2.4rem; }
.seite-kopf .knopf { font-size: .9rem; }
@media (max-width: 640px) { .unterschriften { grid-template-columns: 1fr; } }
@media print {
  .seite-kopf, .nur-bildschirm, .seite-fuss { display: none !important; }
  body { font-size: 11pt; line-height: 1.45; }
  .text-seite { max-width: none; padding: 0; }
  .platzhalter, .f { background: none; }
  h2, h3 { break-after: avoid; }
  .unterschriften, table.vertrag tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}