.picline-sa { --sa-linie: rgb(2 8 74 / 14%); --sa-rot: #b3261e; color: #02084a; }
.picline-sa *, .picline-sa *::before, .picline-sa *::after { box-sizing: border-box; }
.picline-sa-hinweis { margin: 0; padding: .875em 1em; border-left: 4px solid #F7E229; border-radius: 0 8px 8px 0; background: #fff; font-weight: 700; }
.picline-sa-hinweis a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.picline-sa-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin: 0; }
.picline-sa-app > * { min-width: 0; margin: 0; }
.picline-sa-app > [hidden] { display: none; }
.picline-sa-haupt, .picline-sa-kontakt { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--sa-linie); border-radius: 16px; background: #fff; }
.picline-sa-shooting { display: none; padding: clamp(1.5rem, 2.5vw, 2rem); border-top: 6px solid #F7E229; border-radius: 16px; background: #02084a; color: #fff; }
.picline-sa.ist-ergebnis .picline-sa-shooting { display: block; }
@media (min-width: 960px) {
    .picline-sa-app { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); grid-template-rows: auto 1fr; gap: 0 32px; }
    .picline-sa-haupt, .picline-sa-kontakt, .picline-sa-meldung { grid-column: 1; }
    .picline-sa-shooting { display: block; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; }
    .picline-sa .picline-sa-kontakt:not([hidden]) ~ .picline-sa-meldung { margin-top: 20px; }
}

.picline-sa-fortschritt { margin: 0 0 1.5em; }
.picline-sa .picline-sa-schrittzahl { margin: 0 0 .5em; font-size: .875em; font-weight: 700; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; }
.picline-sa-balken { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.picline-sa-balken > span { height: 8px; border-radius: 999px; background: var(--sa-linie); transition: background-color .25s; }
.picline-sa-balken > span.ist-voll { background: #02084a; }

.picline-sa-schritt[hidden] { display: none; }
.picline-sa .picline-sa-schritt > h3, .picline-sa .picline-sa-kontakt > h3, .picline-sa .picline-sa-shooting > h3 { margin: 0; color: inherit; font-size: 1.3em; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-align: left; }
.picline-sa h3:focus { outline: none; }
.picline-sa .picline-sa-hilfe { margin: .35em 0 0; font-size: .875em; line-height: 1.4; opacity: .8; }
.picline-sa .picline-sa-gruppe { margin: 1.25em 0 0; font-weight: 700; line-height: 1.3; }

.picline-sa-kacheln, .picline-sa-weiteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.1em 0 0; }
.picline-sa-gruppe + .picline-sa-kacheln { margin-top: .6em; }
.picline-sa-weiteres { padding: 12px; border-radius: 12px; background: #eef1fa; }
.picline-sa-weiteres[hidden] { display: none; }
.picline-sa-kachel { position: relative; display: block; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.picline-sa-kachel > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picline-sa-kachel > span { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .2em; min-height: 3.6em; height: 100%; padding: .8em 3.1em .8em 1em; border: 2px solid var(--sa-linie); border-radius: 12px; background: #fff; line-height: 1.3; transition: border-color .15s, background-color .15s; }
.picline-sa-kachel b { font-size: 1em; font-weight: 700; overflow-wrap: normal; hyphens: manual; }
.picline-sa-kachel small { font-size: .875em; font-weight: 400; line-height: 1.35; }
.picline-sa-kachel small:empty { display: none; }
.picline-sa-kachel:hover > span { border-color: rgb(2 8 74 / 45%); }
.picline-sa-kachel > input:checked + span, .picline-sa-mehr.ist-gewaehlt > span { border-color: #02084a; background: #eef1fa; box-shadow: inset 0 0 0 1px #02084a; }
.picline-sa-weiteres .picline-sa-kachel > input:checked + span { background: #fff; }
.picline-sa-kachel > input:focus-visible + span, .picline-sa-mehr:focus-visible > span { outline: 3px solid #02084a; outline-offset: 3px; }
.picline-sa-mehr:focus-visible { outline: none; }
.picline-sa-box, .picline-sa-punkt { position: absolute; top: 50%; right: 1em; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border: 2px solid #02084a; background: #fff; }
.picline-sa-box { border-radius: 5px; }
.picline-sa-punkt { border-radius: 50%; }
.picline-sa-kachel > input:checked + span .picline-sa-box, .picline-sa-kachel > input:checked + span .picline-sa-punkt { background: #02084a; }
.picline-sa-kachel > input:checked + span .picline-sa-box::after { content: ""; width: 6px; height: 11px; border: solid #F7E229; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.picline-sa-kachel > input:checked + span .picline-sa-punkt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F7E229; }
.picline-sa-pfeil { position: absolute; top: 50%; right: 1.15em; width: 11px; height: 11px; margin-top: -8px; border: solid #02084a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s; }
.picline-sa-mehr[aria-expanded="true"] .picline-sa-pfeil { margin-top: -2px; transform: rotate(-135deg); }

.picline-sa-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.1em 0 0; }
.picline-sa-feld { min-width: 0; margin: 0; }
.picline-sa-feld-breit { grid-column: 1 / -1; }
.picline-sa-ort { margin-top: 1.1em; }
.picline-sa-feld > label { display: block; font-size: .9375em; font-weight: 700; line-height: 1.3; }
.picline-sa-stern { color: var(--sa-rot); }
.picline-sa-optional { font-weight: 400; opacity: .8; }
.picline-sa-feld input, .picline-sa-feld textarea { display: block; width: 100%; margin: .35em 0 0; padding: .7em .85em; border: 2px solid var(--sa-linie); border-radius: 8px; background: #fff; color: #02084a; font: inherit; font-size: 1em; font-weight: 400; line-height: 1.4; }
.picline-sa-feld textarea { min-height: 6.5em; resize: vertical; }
.picline-sa-feld input:focus, .picline-sa-feld textarea:focus { border-color: #02084a; }
.picline-sa-feld [aria-invalid="true"] { border-color: var(--sa-rot); }
.picline-sa .picline-sa-feldfehler, .picline-sa .picline-sa-fehler { margin: .4em 0 0; color: var(--sa-rot); font-size: 1em; font-weight: 700; line-height: 1.4; }
.picline-sa .picline-sa-fehler { margin-top: .9em; }
.picline-sa-feldfehler:empty, .picline-sa-fehler:empty { display: none; }
.picline-sa-fax { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.picline-sa-kontakt > .cf-turnstile { margin-top: 1em; }

.picline-sa-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75em; margin: 1.5em 0 0; }
.picline-sa-nav button { min-height: 48px; padding: .75em 1.4em; border: 2px solid #02084a; border-radius: 4px; font: inherit; font-size: 1em; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s; }
.picline-sa-zurueck { margin-right: auto; background: #fff; color: #02084a; }
.picline-sa-zurueck:hover { background: #eef1fa; }
.picline-sa-weiter { background: #02084a; color: #fff; }
.picline-sa-weiter:hover { background: #F7E229; color: #02084a; }
.picline-sa-nav .picline-sa-senden { border-color: #F7E229; background: #F7E229; color: #02084a; }
.picline-sa-senden:hover { filter: brightness(.95); }
.picline-sa-senden[disabled] { cursor: wait; opacity: .6; }
.picline-sa button:focus-visible, .picline-sa-feld input:focus-visible, .picline-sa-feld textarea:focus-visible, .picline-sa a:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }

.picline-sa .picline-sa-shooting > h3 { color: #fff; }
.picline-sa-liste { margin: .9em 0 0; }
.picline-sa-liste > div { padding: .7em 0; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.picline-sa-liste dt { margin: 0; font-size: .875em; font-weight: 400; line-height: 1.35; opacity: .8; }
.picline-sa-liste dd { margin: .15em 0 0; font-size: 1em; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.picline-sa-leer { font-weight: 400; font-style: italic; opacity: .7; }
.picline-sa-formate { padding: .8em 0; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.picline-sa-formate[hidden] { display: none; }
.picline-sa .picline-sa-formate-titel { margin: 0 0 .5em; color: #fff; font-size: .875em; font-weight: 400; line-height: 1.35; opacity: .8; }
.picline-sa-formate ul { display: grid; gap: .45em; margin: 0; padding: 0; list-style: none; }
.picline-sa-formate li { display: flex; align-items: center; gap: .7em; margin: 0; font-weight: 700; line-height: 1.35; }
.picline-sa-form { flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.picline-sa-form::before { content: ""; border: 2px solid #F7E229; border-radius: 3px; }
.picline-sa-form-quer::before { width: 26px; height: 17px; }
.picline-sa-form-hoch::before { width: 18px; height: 24px; }
.picline-sa-form-quadrat::before { width: 21px; height: 21px; }
.picline-sa .picline-sa-lieferung { margin: 1.1em 0 0; padding: .75em 1em; border-radius: 8px; background: #F7E229; color: #02084a; font-size: 1em; font-weight: 700; line-height: 1.4; }

.picline-sa .picline-sa-meldung { display: none; margin: 0; padding: .9em 1.1em; border-radius: 8px; font-weight: 700; line-height: 1.45; }
.picline-sa-meldung:focus { outline: none; }
.picline-sa .picline-sa-meldung.ok { display: block; border: 1px solid var(--sa-linie); border-left: 4px solid #F7E229; background: #fff; color: #02084a; }
.picline-sa .picline-sa-meldung.err { display: block; background: #fbeaea; color: var(--sa-rot); }
.picline-sa-kontakt > p.picline-form-hinweis { margin-top: 1.1em; }

@media (max-width: 599px) {
    .picline-sa-kacheln, .picline-sa-weiteres, .picline-sa-felder { grid-template-columns: minmax(0, 1fr); }
    .picline-sa-kacheln, .picline-sa-weiteres { gap: 10px; }
    .picline-sa-nav button { flex: 1 1 auto; }
    .picline-sa-zurueck { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .picline-sa-kachel > span, .picline-sa-balken > span, .picline-sa-pfeil, .picline-sa-nav button { transition: none; }
}