.planner-shell {
--as-blue: #032B6B;
--as-blue-dark: #021d49;
--as-blue-soft: #EDF1F8;
--as-blue-pale: #F7F9FC;
--as-red: #EF3E3E;
--as-red-text: #BB0101;
--as-linie-stark: #8A97A8;
--as-text: #103F5E;
--as-muted: #5c6c82;
--as-line: #d9e0e9;
--as-white: #ffffff;
--as-shadow: 0 18px 50px rgba(3, 43, 107, 0.11);
--as-radius: 16px;
--as-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--as-font-titel: "Urbanist", "Open Sans", Arial, sans-serif;}
.planner-shell,
:where(.planner-shell) *,
.planner-shell *::before,
.planner-shell *::after {
box-sizing: border-box;}
.planner-shell {
color: var(--as-text);
font-family: var(--as-font);
font-size: 16px;
line-height: 1.55;
scroll-margin-top: 130px;}
:where(.planner-shell) button,
:where(.planner-shell) input,
:where(.planner-shell) textarea {
font: inherit;}
:where(.planner-shell) button,
:where(.planner-shell) label,
:where(.planner-shell) input[type="radio"],
:where(.planner-shell) input[type="checkbox"] {
-webkit-tap-highlight-color: transparent;}
:where(.planner-shell) button {
color: inherit;}
:where(.planner-shell) [hidden] {
display: none !important;}
:where(.planner-shell) .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;}
.planner-shell {
margin: 0 auto;
padding: 0 0 8px;}
.planner-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 52px;
margin-bottom: 30px;}
.eyebrow,
.section-kicker,
.summary-kicker {
margin: 0 0 9px;
color: var(--as-red-text);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;}
.intro-copy h1 {
max-width: 800px;
margin: 0;
color: var(--as-blue);
font-size: clamp(2rem, 4vw, 3.45rem);
line-height: 1.08;
letter-spacing: -0.045em;}
.subtitle {
margin: 12px 0 0;
color: #334055;
font-size: clamp(1rem, 1.65vw, 1.25rem);}
.stepper ol {
display: flex;
align-items: flex-start;
margin: 0;
padding: 0;
list-style: none;}
.stepper li {
position: relative;
width: 118px;
text-align: center;}
.stepper li:not(:last-child)::after {
position: absolute;
z-index: 0;
top: 22px;
left: calc(50% + 27px);
width: calc(100% - 54px);
height: 2px;
content: "";
background: var(--as-linie-stark);}
.stepper li.is-complete:not(:last-child)::after {
background: var(--as-red);}
.step-button {
position: relative;
z-index: 1;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;}
.step-button:disabled {
cursor: default;}
.step-number {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 2px solid #8793a4;
border-radius: 50%;
color: #3a4659;
background: #fff;
font-weight: 800;
transition: 180ms ease;}
.step-label {
color: #2f394a;
font-size: 0.9rem;
font-weight: 700;}
.stepper .is-active .step-number {
border-color: var(--as-red);
color: #fff;
background: var(--as-red);
box-shadow: 0 7px 18px rgba(239, 62, 62, 0.24);}
.stepper .is-active .step-label {
color: var(--as-red);}
.stepper .is-complete .step-number {
border-color: var(--as-blue);
color: var(--as-blue);}
.step-button:focus-visible .step-number {
outline: 3px solid rgba(239, 62, 62, 0.22);
outline-offset: 3px;}
.planner-card {
overflow: hidden;
border: 1px solid rgba(3, 43, 107, 0.08);
border-radius: var(--as-radius);
background: var(--as-white);
box-shadow: var(--as-shadow);}
.planner-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
gap: 44px;
padding: 34px 38px 20px;}
.planner-content {
min-width: 0;}
.planner-step {
animation: step-in 260ms ease both;}
@keyframes step-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }}
.section-heading {
margin-bottom: 22px;}
.section-heading h2,
.success-panel h2 {
margin: 0;
color: var(--as-blue-dark);
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
line-height: 1.22;
letter-spacing: -0.025em;}
.section-heading > p:last-child {
margin: 7px 0 0;
color: var(--as-muted);}
.object-options,
.feature-options,
.technology-choice {
margin: 0;
padding: 0;
border: 0;}
.object-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;}
.option-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 13px;
min-height: 92px;
padding: 15px;
border: 1px solid var(--as-line);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;}
.option-card:hover,
.feature-card:hover {
border-color: #8A97A8;
transform: translateY(-1px);}
.option-card:has(input:focus-visible),
.feature-card:has(input:focus-visible),
.technology-choice label:has(input:focus-visible),
.privacy-check:has(input:focus-visible) {
outline: 3px solid rgba(3, 43, 107, 0.17);
outline-offset: 2px;}
.option-card:has(input:checked) {
border-color: var(--as-blue);
background: var(--as-blue-pale);
box-shadow: inset 0 0 0 1px var(--as-blue);}
.option-card input,
.feature-card input {
position: absolute;
opacity: 0;
pointer-events: none;}
.option-icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid var(--as-linie-stark);
border-radius: 11px;
color: var(--as-blue);
background: #fff;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.04em;}
.option-text,
.feature-card > span:last-child,
.counter-label {
display: flex;
min-width: 0;
flex-direction: column;}
.option-text strong,
.feature-card strong,
.counter-label strong {
color: #0b2856;
line-height: 1.25;}
.option-text small,
.feature-card small,
.counter-label small {
margin-top: 3px;
color: var(--as-muted);
font-size: 0.77rem;
line-height: 1.35;}
.choice-mark,
.feature-check {
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 1px solid var(--as-linie-stark);
border-radius: 50%;
color: transparent;
background: #fff;
font-size: 0.8rem;
font-weight: 900;}
.option-card:has(input:checked) .choice-mark,
.feature-card:has(input:checked) .feature-check {
border-color: var(--as-red);
color: #fff;
background: var(--as-red);}
.counter-list {
display: grid;
gap: 10px;}
.counter-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 15px;
min-height: 77px;
padding: 11px 16px;
border: 1px solid var(--as-line);
border-radius: 11px;}
.access-icon {
display: grid;
width: 43px;
height: 43px;
place-items: center;
border: 2px solid var(--as-blue);
border-radius: 10px 3px 3px 10px;
color: var(--as-blue);
background: #fff;
font-weight: 900;}
.counter-control {
display: grid;
grid-template-columns: 42px 50px 42px;
align-items: center;
gap: 7px;}
.counter-control button {
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--as-linie-stark);
border-radius: 8px;
color: var(--as-blue-dark);
background: #fff;
font-size: 1.35rem;
font-weight: 500;
cursor: pointer;
transition: 150ms ease;}
.counter-control button:hover {
border-color: var(--as-blue);
color: #fff;
background: var(--as-blue);}
.counter-control button:focus-visible,
.primary-button:focus-visible,
.back-button:focus-visible,
.text-button:focus-visible,
:where(.planner-shell) input:focus-visible,
:where(.planner-shell) select:focus-visible,
:where(.planner-shell) textarea:focus-visible {
outline: 3px solid #032B6B;
outline-offset: 2px;}
.counter-control output {
color: #032B6B;
text-align: center;
font-size: 1.35rem;
font-weight: 800;}
.textarea-field,
.input-field {
display: grid;
gap: 7px;
color: #032B6B;
font-size: 0.9rem;
font-weight: 700;}
.textarea-field {
margin-top: 16px;}
.textarea-field small {
color: var(--as-muted);
font-weight: 500;}
:where(.planner-shell) input[type="text"],
:where(.planner-shell) input[type="email"],
:where(.planner-shell) input[type="tel"],
:where(.planner-shell) select,
:where(.planner-shell) textarea {
width: 100%;
border: 1px solid var(--as-linie-stark);
border-radius: 9px;
color: #103F5E;
background: #fff;
transition: border-color 150ms ease, box-shadow 150ms ease;}
:where(.planner-shell) input[type="text"],
:where(.planner-shell) input[type="email"],
:where(.planner-shell) input[type="tel"],
:where(.planner-shell) select {
min-height: 49px;
padding: 10px 13px;}
:where(.planner-shell) select {
appearance: none;
padding-right: 38px;
background-image:
linear-gradient(45deg, transparent 50%, var(--as-blue) 50%),
linear-gradient(135deg, var(--as-blue) 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 2px),
calc(100% - 13px) calc(50% - 2px);
background-repeat: no-repeat;
background-size: 5px 5px, 5px 5px;}
:where(.planner-shell) textarea {
min-height: 86px;
padding: 12px 14px;
resize: vertical;}
:where(.planner-shell) input:focus,
:where(.planner-shell) select:focus,
:where(.planner-shell) textarea:focus {
border-color: var(--as-blue);
box-shadow: 0 0 0 3px rgba(3, 43, 107, 0.08);}
:where(.planner-shell) ::placeholder {
color: #6B7889;}
.feature-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;}
.cylinder-field {
margin-top: 16px;}
.input-field small {
color: var(--as-muted);
font-weight: 500;}
.requirements-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 20px;}
.user-groups-field {
margin-bottom: 20px;}
.feature-options > legend {
grid-column: 1 / -1;
width: 100%;
margin-bottom: 2px;
color: #032B6B;
font-weight: 800;}
.feature-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px;
min-height: 90px;
padding: 15px;
border: 1px solid var(--as-line);
border-radius: 11px;
cursor: pointer;
transition: 160ms ease;}
.feature-card:has(input:checked) {
border-color: var(--as-blue);
background: var(--as-blue-pale);
box-shadow: inset 0 0 0 1px var(--as-blue);}
.feature-check {
margin-top: 1px;
border-radius: 7px;}
.technology-choice {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 19px;}
.technology-choice legend {
width: 100%;
margin-bottom: 3px;
color: #032B6B;
font-weight: 800;}
.technology-choice label {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid var(--as-line);
border-radius: 999px;
color: #334259;
background: #fff;
font-size: 0.82rem;
cursor: pointer;}
.technology-choice label:has(input:checked) {
border-color: var(--as-blue);
color: var(--as-blue);
background: var(--as-blue-pale);
font-weight: 700;}
.technology-choice input {
accent-color: var(--as-red);}
.contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;}
.contact-wide {
grid-column: 1 / -1;}
.contact-grid .textarea-field {
margin-top: 0;}
.privacy-check {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 10px;
margin-top: 17px;
color: #3f4f66;
font-size: 0.78rem;
cursor: pointer;}
.privacy-check input {
width: 19px;
height: 19px;
margin: 1px 0 0;
accent-color: var(--as-blue);}
.privacy-check a {
color: var(--as-blue);
font-weight: 700;}
.contact-hint {
margin: 8px 0 0;
color: var(--as-muted);
font-size: 0.76rem;}
.field-error {
min-height: 1.2em;
margin: 10px 0 0;
color: #8F0101;
font-size: 0.82rem;
font-weight: 700;}
.planning-summary {
align-self: start;
min-height: 100%;
padding: 31px;
border: 1px solid #DCE5F0;
border-radius: 15px;
background:
linear-gradient(145deg, rgba(255,255,255,0.72), transparent 55%),
var(--as-blue-soft);}
.summary-kicker {
color: var(--as-blue);
letter-spacing: 0.04em;
text-transform: none;}
.summary-object {
margin: 12px 0 3px;
color: #103F5E;}
.summary-object strong {
color: var(--as-blue-dark);}
.summary-users {
margin: 0 0 16px;
padding-bottom: 18px;
border-bottom: 1px solid #C7D0DC;
color: #103F5E;}
.summary-users strong {
color: var(--as-blue-dark);}
.access-total {
display: flex;
align-items: baseline;
gap: 9px;
margin: 7px 0 14px;}
.access-total strong {
color: var(--as-blue);
font-size: 3.65rem;
line-height: 1;
letter-spacing: -0.06em;}
.access-total span {
color: #19365f;
font-weight: 700;}
.technology-badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;}
.technology-badges span {
display: grid;
min-height: 50px;
place-items: center;
padding: 8px 5px;
border: 1px solid var(--as-linie-stark);
border-radius: 9px;
color: var(--as-blue-dark);
background: rgba(255,255,255,0.75);
text-align: center;
font-size: 0.69rem;
font-weight: 800;
transition: 160ms ease;}
.technology-badges span.is-relevant {
border-color: var(--as-blue);
color: #fff;
background: var(--as-blue);
box-shadow: 0 6px 14px rgba(3, 43, 107, 0.15);}
.recommendation {
margin: 16px 0 0;
color: #324763;
font-size: 0.86rem;
line-height: 1.5;}
.selected-features {
margin-top: 18px;
padding-top: 17px;
border-top: 1px solid #C7D0DC;}
.selected-features > p {
margin: 0 0 8px;
color: var(--as-blue-dark);
font-size: 0.79rem;
font-weight: 800;}
.selected-features ul {
display: grid;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;}
.selected-features li {
color: #405471;
font-size: 0.74rem;}
.selected-features li::before {
margin-right: 7px;
color: var(--as-red);
content: "•";}
.trust-list {
display: grid;
gap: 12px;
margin: 22px 0 0;
padding: 20px 0 0;
border-top: 1px solid #C7D0DC;
list-style: none;}
.trust-list li {
position: relative;
padding-left: 34px;
color: #18375f;
font-size: 0.83rem;
font-weight: 650;}
.trust-list li::before {
position: absolute;
top: -1px;
left: 0;
display: grid;
width: 23px;
height: 23px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--as-blue);
content: "✓";
font-size: 0.72rem;
font-weight: 900;}
.planner-navigation {
display: flex;
min-height: 88px;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0 38px;
padding: 15px 0;
border-top: 1px solid #DCE5F0;}
.back-button,
.text-button {
border: 0;
color: var(--as-blue);
background: transparent;
font-weight: 800;
cursor: pointer;}
.back-button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 2px;}
.back-button span {
font-size: 1.5rem;
font-weight: 400;}
.navigation-end {
display: flex;
align-items: center;
gap: 26px;
margin-left: auto;}
.primary-button {
display: inline-flex;
min-height: 53px;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 25px;
border: 0;
border-radius: 9px;
color: #fff;
background: linear-gradient(135deg, var(--as-blue), var(--as-blue-dark));
box-shadow: 0 8px 20px rgba(3, 43, 107, 0.17);
font-weight: 800;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;}
.primary-button:hover {
transform: translateY(-1px);
box-shadow: 0 11px 24px rgba(3, 43, 107, 0.24);}
.primary-button span {
color: var(--as-red);
font-size: 1.5rem;
line-height: 1;}
.primary-button:disabled {
opacity: 0.58;
cursor: wait;
transform: none;}
.steps-remaining {
min-width: 110px;
color: #445166;
font-size: 0.86rem;
font-weight: 700;}
.success-panel {
display: grid;
min-height: 440px;
align-content: center;
justify-items: start;
padding: 30px 4vw;
animation: step-in 260ms ease both;}
.success-panel > p:not(.section-kicker) {
max-width: 620px;
color: var(--as-muted);}
.success-icon {
display: grid;
width: 62px;
height: 62px;
margin-bottom: 18px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--as-blue);
box-shadow: 0 10px 22px rgba(3, 43, 107, 0.2);
font-size: 1.6rem;
font-weight: 900;}
.success-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-top: 14px;}
@media (max-width: 1100px) {
.planner-intro {
grid-template-columns: 1fr;
gap: 24px;}
.stepper ol {
justify-content: space-between;}
.stepper li {
flex: 1;
width: auto;}
.planner-grid {
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
gap: 24px;}
.technology-badges {
grid-template-columns: 1fr;}
.technology-badges span {
min-height: 38px;}}
@media (max-width: 840px) {
.planner-shell {
width: min(100% - 28px, 720px);
padding-top: 32px;}
.planner-grid {
grid-template-columns: 1fr;
padding: 27px 24px 18px;}
.planning-summary {
min-height: 0;}
.technology-badges {
grid-template-columns: repeat(3, minmax(0, 1fr));}
.planner-navigation {
margin: 0 24px;}}
@media (max-width: 620px) {
.planner-shell {
font-size: 15px;}
.planner-shell {
padding: 0 0 8px;}
.intro-copy h1 {
font-size: 2.05rem;}
.stepper li:not(:last-child)::after {
top: 19px;
left: calc(50% + 22px);
width: calc(100% - 44px);}
.step-number {
width: 40px;
height: 40px;}
.step-label {
font-size: 0.72rem;}
.planner-card {
border-radius: 14px;}
.planner-grid {
padding: 23px 17px 14px;}
.object-options,
.feature-options,
.requirements-meta,
.contact-grid {
grid-template-columns: 1fr;}
.contact-wide {
grid-column: auto;}
.counter-row {
grid-template-columns: auto 1fr;}
.counter-control {
grid-column: 1 / -1;
justify-content: end;}
.planning-summary {
padding: 24px 20px;}
.planner-navigation {
align-items: stretch;
flex-direction: column-reverse;
margin: 0 17px;
padding: 17px 0;}
.navigation-end {
align-items: stretch;
flex-direction: column;
gap: 8px;
margin-left: 0;}
.primary-button {
width: 100%;}
.steps-remaining {
text-align: center;}
.back-button {
align-self: center;}}
@media (prefers-reduced-motion: reduce) {
.planner-shell,
.planner-shell *,
.planner-shell *::before,
.planner-shell *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;}}
.planner-shell h2,
.planner-shell h3,
.planner-shell h4,
.planner-shell .step-number,
.planner-shell .counter-control output,
.planner-shell .summary-total strong {
font-family: var(--as-font-titel);}
.planner-shell .back-button[hidden],
.planner-shell .success-panel[hidden],
.planner-shell .planner-step[hidden] {
display: none !important;}
.planner-shell .technology-choice input[type="radio"] {
appearance: auto;
-webkit-appearance: radio;
width: 18px;
height: 18px;}
.planner-shell input[type="checkbox"]:before,
.planner-shell input[type="radio"]:before {
content: none;}
.planner-shell .as-hinweis {
margin: 18px 0 0;
color: var(--as-muted);
font-size: 0.86rem;
line-height: 1.5;}
.planner-shell .as-hinweis a {
color: var(--as-blue);}
.planner-shell input[type="text"],
.planner-shell input[type="email"],
.planner-shell input[type="tel"],
.planner-shell select,
.planner-shell textarea {
border: 1px solid var(--as-linie-stark);
border-radius: 10px;
background-color: #F7FAFD;
color: var(--as-text);
font-family: var(--as-font-titel);
font-size: 18px;
line-height: 1.35;
box-shadow: none;}
.planner-shell input[type="text"],
.planner-shell input[type="email"],
.planner-shell input[type="tel"],
.planner-shell select {
height: 52px;
min-height: 52px;
padding: 0 15px;}
.planner-shell textarea {
min-height: 96px;
padding: 13px 15px;
line-height: 1.5;}
.planner-shell select {
appearance: none;
-webkit-appearance: none;
padding-right: 42px;
background-image:
linear-gradient(45deg, transparent 50%, var(--as-blue) 50%),
linear-gradient(135deg, var(--as-blue) 50%, transparent 50%);
background-position:
calc(100% - 22px) calc(50% - 2px),
calc(100% - 17px) calc(50% - 2px);
background-repeat: no-repeat;
background-size: 5px 5px, 5px 5px;}
.planner-shell input[type="text"]:hover,
.planner-shell input[type="email"]:hover,
.planner-shell input[type="tel"]:hover,
.planner-shell select:hover,
.planner-shell textarea:hover {
border-color: #5F7086;
background-color: #FFFFFF;}
.planner-shell input:focus,
.planner-shell select:focus,
.planner-shell textarea:focus {
border-color: var(--as-blue);
background-color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(3, 43, 107, 0.15);}
.planner-shell .intro-copy h1,
.planner-shell h2,
.planner-shell h3 {
color: var(--as-blue);}
.planner-shell .primary-button {
min-height: 60px;
border-radius: 10px;
background: var(--as-blue);
color: #fff;
font-family: var(--as-font-titel);
font-size: 20px;
font-weight: 600;
box-shadow: 0 8px 20px rgba(3, 43, 107, 0.17);}
.planner-shell .primary-button:hover {
background: var(--as-blue-dark);}
.planner-shell .back-button,
.planner-shell .text-button {
color: var(--as-blue);}
.planner-shell .planner-step h2:focus,
.planner-shell .success-panel h2:focus {
outline: none;}
.planner-shell .stepper ol {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: start;
width: 100%;}
.planner-shell .stepper {
min-width: 0;}
.planner-shell .stepper li {
width: auto;
min-width: 0;}
.planner-shell .step-button {
display: flex;
width: 100%;
min-width: 0;}
.planner-shell .step-label {
max-width: 100%;
text-align: center;}
@media (max-width: 620px) {
.planner-shell .stepper li:not(.is-active) .step-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;}
.planner-shell .stepper li.is-active .step-label {
font-size: 0.78rem;
white-space: nowrap;
overflow: visible;}
.planner-shell .step-button {
overflow: visible;}
.planner-shell .step-number {
width: 38px;
height: 38px;
font-size: 0.95rem;}
.planner-shell .stepper li:not(:last-child)::after {
top: 18px;
left: calc(50% + 23px);
width: calc(100% - 46px);}}
.planner-shell .stepper .is-active .step-number {
border-color: var(--as-blue);
background: var(--as-blue);
box-shadow: 0 7px 18px rgba(3, 43, 107, 0.24);}
.planner-shell .stepper .is-active .step-label {
color: var(--as-blue);}
.planner-shell .stepper li.is-complete:not(:last-child)::after {
background: var(--as-blue);}
.planner-shell .step-number {
border-color: var(--as-linie-stark);
color: var(--as-text);}
.planner-shell .step-label {
color: var(--as-muted);}
.planner-shell .option-card:has(input:checked) .choice-mark,
.planner-shell .feature-card:has(input:checked) .feature-check {
border-color: var(--as-blue);
background: var(--as-blue);}
.planner-shell .technology-choice input {
accent-color: var(--as-blue);}
.planner-shell .selected-features li::before {
color: var(--as-blue);}
.planner-shell .primary-button span {
color: #fff;}
.planner-shell .input-field {
grid-template-rows: 1fr auto;}
.planner-shell .eyebrow,
.planner-shell .section-kicker,
.planner-shell .summary-kicker {
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.4;}
.planner-shell .eyebrow {
margin-bottom: 14px;}
.planner-shell .eyebrow:after {
content: "";
display: block;
width: 34px;
height: 3px;
margin-top: 10px;
border-radius: 2px;
background: var(--as-red-text);}
.planner-shell {
font-size: 17px;
line-height: 1.7;}
.planner-shell .planner-intro {
margin-bottom: 44px;}
.planner-shell .eyebrow,
.planner-shell .section-kicker,
.planner-shell .summary-kicker {
margin-bottom: 16px;}
.planner-shell .subtitle {
margin-top: 22px;}
.planner-shell .planner-grid {
gap: 52px;
padding: 44px 46px 34px;}
.planner-shell .section-heading {
margin-bottom: 32px;}
.planner-shell .section-heading > p:last-child {
margin-top: 14px;}
.planner-shell .option-card {
gap: 16px;
padding: 18px;}
.planner-shell .object-options,
.planner-shell .feature-options {
gap: 16px;}
.planner-shell .requirements-meta,
.planner-shell .contact-grid {
gap: 20px;}
.planner-shell .input-field,
.planner-shell .textarea-field {
gap: 11px;}
.planner-shell .planning-summary {
padding: 34px;}
@media (max-width: 767px) {
.planner-shell .planner-grid {
gap: 34px;
padding: 30px 22px 26px;}
.planner-shell .planning-summary {
padding: 24px;}}
body.hat-planer .l-main .l-section {
background-color: #EDF1F8;}
body.hat-planer .l-main .l-section > .l-section-h {
padding-top: 150px;
padding-bottom: 90px;}
.planner-shell .planner-card {
border: 1px solid #DCE5F0;}
@media (max-width: 767px) {
body.hat-planer .l-main .l-section > .l-section-h {
padding-top: 120px;
padding-bottom: 50px;}}