@charset "UTF-8";
.herobild{min-width:0;display:flex;align-items:center}
.herobild img{width:100%;height:auto;aspect-ratio:450/371;object-fit:contain}
.pflichtkarten,.vertragspunkte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--luft)}
.pflichtkarten li,.vertragspunkte li{margin:0;background:#fff;border:1px solid var(--linie);border-radius:18px;padding:26px 24px;box-shadow:var(--schatten)}
.pflichtkarten svg,.vertragspunkte svg{display:block;width:32px;height:32px;margin-bottom:16px;color:var(--orange)}
.pflichtkarten h3,.vertragspunkte h3{margin:0 0 10px}
.pflichtkarten p,.vertragspunkte p{margin:0}
.unservertrag .note-box{margin-top:var(--luft)}
.fehlerliste{list-style:none;margin:0;padding:0;counter-reset:fehler;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fehlerliste li{margin:0;counter-increment:fehler;padding:24px 26px;background:#fff;border:1px solid var(--linie);border-radius:16px;box-shadow:var(--schatten)}
.fehlerliste h3{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.fehlerliste h3::before{content:counter(fehler);flex:none;width:38px;height:38px;border-radius:12px;background:var(--orange-hell);color:var(--orange);display:grid;place-items:center;font-weight:700}
.fehlerliste p{margin:0}
.ablaufkarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ablaufkarten li{margin:0;padding:28px 24px 26px;background:#fff;border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten)}
.ablaufkarten .ablauf-icon{margin:0 0 16px}
.ablaufkarten p{margin:0}
.vorlagenkarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--luft)}
.vorlagenkarten li{margin:0;display:flex;flex-direction:column;padding:26px 24px 24px;background:#fff;border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten)}
.vorlagenkarten svg{display:block;width:34px;height:34px;margin-bottom:16px;color:var(--orange)}
.vorlagenkarten h3{margin:0 0 10px;hyphens:auto}
.vorlagenkarten p{margin:0 0 20px;color:var(--navy-2)}
.laden{display:flex;align-items:center;gap:14px;margin:auto 0 0;padding:14px 16px;border:1px solid var(--linie);border-radius:0;text-decoration:none;color:inherit;transition:border-color .18s ease,background-color .18s ease}
.laden b{display:block;color:var(--navy)}
.laden small{display:block;margin-top:3px;color:var(--orange);font-weight:700}
.laden:hover b{color:var(--orange)}
.laden:hover{border-color:var(--orange);background:var(--orange-hell)}
.laden:hover .kv-pdfpic{border-color:var(--orange)}
.kv-pdfpic{position:relative;flex:none;width:44px;height:56px;border-radius:6px;background:var(--bahn);border:1px solid var(--linie);transition:border-color .18s ease}
.kv-pdfpic::after{content:"PDF";position:absolute;bottom:5px;left:50%;transform:translateX(-50%) scale(.55);transform-origin:bottom center;background:var(--orange);color:#fff;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:5px;white-space:nowrap}
.vorlagen .note-box{margin-top:var(--luft)}
.vergleichsraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--luft);align-items:stretch}
.vergleichskarte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:20px;padding:30px 28px;box-shadow:var(--schatten)}
.vergleichskarte h3{margin:0 0 14px}
.vergleichskarte .checkliste{margin:0}
.vergleichskarte .checkliste>li:last-child{margin-bottom:0}
.hervor{border-color:var(--orange)}
.minusliste{list-style:none;margin:0;padding:0}
.minusliste>li{margin:0 0 10px;padding-left:30px;position:relative}
.minusliste>li:last-child{margin-bottom:0}
.minusliste>li::before{content:"\f00d";font-family:'Icons';position:absolute;left:0;top:1px;color:var(--navy-2)}
.honigtopf{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.honigtopf label{display:none}
.honigtopf input{width:1px;padding:0;border:0}
.vertragsform{position:relative;background:#fff;border:1px solid var(--linie);border-radius:20px;padding:32px;box-shadow:var(--schatten)}
.formraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand) 52px}
.vertragsform fieldset{display:flex;flex-direction:column;border:0;margin:0;padding:0}
.vertragsform legend{padding:0;margin:0 0 14px;color:var(--orange);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.feldpaar{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);align-items:center;gap:10px 18px;margin-bottom:12px}
.feldpaar:last-child{margin-bottom:0}
.feldpaar label{color:var(--navy-2)}
.feldpaar input{width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;border:1.5px solid var(--linie);border-radius:var(--radius);background:#fff;font:inherit;color:var(--ink)}
.feldpaar input:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--navy)}
.feldpaar input.fehlt{border-color:var(--orange);background:var(--orange-hell)}
.unterschriftsfeld p{margin:0 0 10px;color:var(--navy-2)}
.unterschriftsflaeche{position:relative;flex:1 1 auto;min-height:0}
.unterschriftsfeld canvas{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;border:1.5px dashed var(--linie);border-radius:var(--radius);background:var(--bahn);touch-action:none;cursor:crosshair}
.loeschknopf{align-self:flex-start;flex:none;margin-top:12px;border-radius:8px;min-height:40px;padding:8px 18px;border:1px solid var(--linie);background:#fff;font:inherit;color:var(--navy-2);cursor:pointer;transition:border-color .18s ease,color .18s ease}
.loeschknopf:hover{border-color:var(--orange);color:var(--orange)}
.formknoepfe{display:flex;flex-wrap:wrap;gap:24px;margin-top:calc(var(--abstand) + 16px)}
.zustimmung{display:flex;align-items:flex-start;gap:12px;margin-top:var(--abstand)}
.zustimmung input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--orange)}
.formmeldung{margin:14px 0 0;min-height:24px;font-weight:600}
.ausfuellen .note-box{margin-top:var(--luft)}
.abschluss>h2{text-align:left}
.abschluss>p:first-of-type{max-width:none;margin-inline:0;text-align:left}
.abschlussknoepfe{display:flex;flex-wrap:wrap;gap:16px}
@media (min-width:901px){
.vertragsseite .hero-btns{gap:18px}
.vertragsseite .hero-btn{padding-inline:24px}
}
@media (prefers-reduced-motion:reduce){
.kv-pdfpic{transition:none}
}
@media (max-width:1180px){
.pflichtkarten,.vertragspunkte,.vorlagenkarten{gap:20px}
.pflichtkarten li,.vertragspunkte li,.vorlagenkarten li{padding:24px 20px}
}
@media (max-width:1024px){
.pflichtkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
.vorlagenkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.ablaufkarten,.vertragspunkte,.vergleichsraster,.fehlerliste{grid-template-columns:minmax(0,1fr);gap:18px}
.formraster{grid-template-columns:minmax(0,1fr);gap:var(--abstand)}
.feldpaar{grid-template-columns:minmax(0,1fr);gap:6px}
.unterschriftsflaeche{flex:none;height:190px}
.vertragsform{padding:24px 20px}
.fehlerliste li{padding:22px 20px}
}
@media (max-width:640px){
.pflichtkarten,.vorlagenkarten{grid-template-columns:minmax(0,1fr)}
.abschlussknoepfe a,.formknoepfe button,.hero-btns a{width:100%}
.formknoepfe{flex-direction:column}
}
@media (max-width:360px){
.formknoepfe button,.vertragsseite .hero-btns a{width:100%;padding-inline:16px;white-space:normal}
.vertragsseite h1,.vertragsseite h2,.vertragsseite h3{hyphens:auto;overflow-wrap:anywhere}
}