/* /Components/Kit/MChip.razor.rz.scp.css */
.m-chip[b-oexhjat9zs] {
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 12px 16px;
    min-height: 48px;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease, border-color .15s ease;
}

.m-chip:active[b-oexhjat9zs] { transform: scale(.96); }

.m-chip.is-selected[b-oexhjat9zs] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
}
/* /Components/Kit/MChoiceGrid.razor.rz.scp.css */
.m-choices[b-4s79ngbl57] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-choice[b-4s79ngbl57] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    font-family: inherit;
    color: var(--card-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    min-height: 64px;
    cursor: pointer;
    /* Press feedback must be CSS, not a render: on Blazor Server the selected class only
       lands after a round trip, so without :active a tap looks like nothing happened.
       touch-action/tap-highlight kill the 300 ms delay and the blue-grey iOS flash. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}

.m-choice:active[b-4s79ngbl57] {
    background: var(--accent);
    border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
    transform: scale(.985);
}

/* 2 px ring + a filled check: at arm's length a 1 px border change is invisible. */
.m-choice.is-selected[b-4s79ngbl57] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
    background: color-mix(in oklab, var(--primary) 7%, var(--card));
}

.m-choice.is-selected .m-choice-label[b-4s79ngbl57]::after {
    content: " ✓";
    color: var(--primary);
    font-weight: 700;
}

/* Our recommendation while the customer has not answered — deliberately weaker than
   is-selected: dashed, no fill. "This is what we'd build", not "you picked this". */
.m-choice.is-suggested[b-4s79ngbl57] {
    border-style: dashed;
    border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}

.m-choice-top[b-4s79ngbl57] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.m-choice-icon[b-4s79ngbl57] { font-size: 1.25rem; }

.m-choice-label[b-4s79ngbl57] {
    font-size: 1.05rem;
    font-weight: 650;
}

.m-choice-badge[b-4s79ngbl57] { margin-left: auto; }

.m-choice-desc[b-4s79ngbl57] {
    color: var(--muted-foreground);
    font-size: .9rem;
    line-height: 1.55;
}
/* /Components/Kit/MContactForm.razor.rz.scp.css */
.m-contact[b-2mzc4zxaxc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* BbInput / BbTextarea render the control — reachable only through ::deep. */
[b-2mzc4zxaxc] .m-contact-input { min-height: 52px; font-size: 1rem; }
[b-2mzc4zxaxc] .m-contact-textarea { min-height: 110px; font-size: 1rem; line-height: 1.55; }

.m-contact-error-list[b-2mzc4zxaxc] { margin: 0; padding-left: 18px; }

.m-contact-submit[b-2mzc4zxaxc] { margin-top: 6px; }
/* /Components/Kit/MField.razor.rz.scp.css */
.m-field-req[b-w3rvcsk6ze] {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-left: 6px;
}
/* /Components/Kit/MNotice.razor.rz.scp.css */
.m-notice-title[b-wdc8w1qxek] {
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 3px;
}

.m-notice-text[b-wdc8w1qxek] {
    font-size: .88rem;
    line-height: 1.55;
}

.m-notice-actions[b-wdc8w1qxek] { margin-top: 10px; }
/* /Components/Kit/MNumberField.razor.rz.scp.css */
.m-num-row[b-4rq4f7gy69] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

[b-4rq4f7gy69] .m-num-step {
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    font-size: 1.35rem;
    line-height: 1;
}

.m-num-box[b-4rq4f7gy69] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    position: relative;
}

[b-4rq4f7gy69] .m-num-input {
    height: 56px;
    font-size: 1.35rem;
    font-weight: 600;
    text-align: center;
    padding-right: 44px;
}

.m-num-unit[b-4rq4f7gy69] {
    position: absolute;
    right: 14px;
    color: var(--muted-foreground);
    font-size: .85rem;
    pointer-events: none;
}

[b-4rq4f7gy69] .m-num-range { margin-top: 18px; padding: 12px 0; }

.m-num-scale[b-4rq4f7gy69] {
    display: flex;
    justify-content: space-between;
    color: var(--muted-foreground);
    font-size: .7rem;
    margin-top: 2px;
}
/* /Components/Kit/MPriceCard.razor.rz.scp.css */
.m-price-value[b-qhg21u52y8] {
    font-size: clamp(2.2rem, 10vw, 3rem);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-top: 8px;
}

.m-price-value.is-secondary[b-qhg21u52y8] {
    font-size: clamp(1.15rem, 4.5vw, 1.4rem);
    font-weight: 650;
    color: var(--muted-foreground);
}
/* /Components/Kit/MSlider.razor.rz.scp.css */
.m-slider-head[b-qzo8ui6qnc] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.m-slider-value[b-qzo8ui6qnc] {
    font-size: 1.4rem;
    font-weight: 650;
}

/* BbSlider renders its own track/thumb — grow the hit area for touch. */
[b-qzo8ui6qnc] .m-slider-input {
    padding: 14px 0;
}
/* /Components/Kit/MStepShell.razor.rz.scp.css */
.m-step[b-vsz8kum0l8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.m-step-head[b-vsz8kum0l8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--touch);
    margin-bottom: 10px;
}

/* Rendered by BbButton / BbProgress — reachable only through ::deep. */
[b-vsz8kum0l8] .m-step-back {
    margin-left: -8px;
    color: var(--muted-foreground);
}

[b-vsz8kum0l8] .m-step-progress { height: 6px; }

.m-step-title[b-vsz8kum0l8] { margin: 24px 0 0; }

.m-step-hint[b-vsz8kum0l8] {
    color: var(--muted-foreground);
    font-size: .95rem;
    line-height: 1.55;
    margin: 8px 0 0;
}

.m-step-body[b-vsz8kum0l8] {
    flex: 1;
    padding: 24px 0 20px;
}

.m-step-foot[b-vsz8kum0l8] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 0 calc(env(safe-area-inset-bottom) + 4px);
    background: linear-gradient(to top, var(--background) 65%, transparent);
}
/* /Components/Kit/MSummaryList.razor.rz.scp.css */
.m-summary[b-1bh89m3d1g] {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.m-summary-row[b-1bh89m3d1g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}

.m-summary-row:last-child[b-1bh89m3d1g] { border-bottom: 0; }

.m-summary dt[b-1bh89m3d1g] {
    color: var(--muted-foreground);
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-summary-hint[b-1bh89m3d1g] {
    font-size: .75rem;
    opacity: .8;
}

.m-summary dd[b-1bh89m3d1g] {
    margin: 0;
    font-weight: 600;
    font-size: .98rem;
    text-align: right;
}
/* /Components/Kit/MSwatchGrid.razor.rz.scp.css */
.m-swatches[b-dgqpadygto] { display: flex; flex-direction: column; }

.m-swatch-grid[b-dgqpadygto] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 10px;
}

.m-swatch[b-dgqpadygto] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    color: var(--muted-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 6px;
    min-height: 94px;
    cursor: pointer;
    /* See MChoiceGrid: the tap must acknowledge itself without waiting for the circuit. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}

.m-swatch:active[b-dgqpadygto] {
    background: var(--accent);
    border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
    transform: scale(.97);
}

.m-swatch.is-selected[b-dgqpadygto] {
    border-color: var(--primary);
    color: var(--foreground);
    font-weight: 650;
    box-shadow: inset 0 0 0 2px var(--primary);
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
}

/* The dot itself carries the mark, so the ring is readable even on a pale RAL. */
.m-swatch.is-selected .m-swatch-dot[b-dgqpadygto] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.m-swatch-dot[b-dgqpadygto] {
    width: 44px;
    height: 44px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border);
}

.m-swatch-key[b-dgqpadygto] {
    font-size: .68rem;
    letter-spacing: .02em;
}

.m-swatch-more[b-dgqpadygto] { margin-top: 14px; align-self: flex-start; }
/* /Components/Kit/MToggle.razor.rz.scp.css */
.m-toggle[b-6xemu4wrmt] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    min-height: 64px;
    cursor: pointer;
    /* See MChoiceGrid: press feedback cannot wait for the circuit round trip. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}

.m-toggle:active[b-6xemu4wrmt] {
    background: var(--accent);
    transform: scale(.99);
}

.m-toggle.is-on[b-6xemu4wrmt] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background: color-mix(in oklab, var(--primary) 6%, var(--card));
}

.m-toggle-text[b-6xemu4wrmt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.m-toggle-label[b-6xemu4wrmt] {
    font-size: 1rem;
    font-weight: 600;
}

.m-toggle-desc[b-6xemu4wrmt] {
    color: var(--muted-foreground);
    font-size: .85rem;
    line-height: 1.5;
}

/* The row owns the click; the switch is a visual state indicator inside it. */
.m-toggle-switch[b-6xemu4wrmt] { pointer-events: none; }
/* /Components/Pages/Assistent.razor.rz.scp.css */
/* Chat surface. Same tokens as the rest of the app (Blueprint theme variables) — the only
   new idea here is the two-sided bubble rhythm and a log that scrolls inside the page
   instead of growing it, so the input row stays reachable with one thumb. */

.m-chat[b-408jgzmmfp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1;
}

.m-chat-head[b-408jgzmmfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The log is the ONLY scroller on this page: min-height:0 lets it shrink inside the flex
   column instead of pushing the input row off the bottom, which is what keeps the gate
   above and the input below both fixed while the conversation scrolls between them. */
.m-chat-log[b-408jgzmmfp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px 8px;
}

.m-bubble[b-408jgzmmfp] {
    max-width: 84%;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: .95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.m-bubble-assistant[b-408jgzmmfp] {
    align-self: flex-start;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.m-bubble-user[b-408jgzmmfp] {
    align-self: flex-end;
    background: var(--primary);
    color: var(--primary-foreground);
    border-bottom-right-radius: 4px;
}

/* Three dots while the assistant thinks. Reduced-motion is handled globally in app.css. */
.m-typing[b-408jgzmmfp] {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 14px;
}

.m-typing span[b-408jgzmmfp] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-foreground);
    animation: m-typing-bounce-b-408jgzmmfp 1.1s infinite ease-in-out;
}

.m-typing span:nth-child(2)[b-408jgzmmfp] { animation-delay: .15s; }
.m-typing span:nth-child(3)[b-408jgzmmfp] { animation-delay: .3s; }

@keyframes m-typing-bounce-b-408jgzmmfp {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* --- The gate above the conversation ------------------------------------ */

/* Roughly the top third of the phone. Fixed height on purpose: the log below it must keep a
   stable size, otherwise every new bubble would resize the viewer and re-frame the camera. */
.m-chat-viewer[b-408jgzmmfp] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: 34vh;
    min-height: 200px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

/* Owns the viewer's box. The Bb3dViewer is a child COMPONENT — scoped CSS does not reach
   its root element — so the sizing lives on a wrapper in this component's own markup and the
   viewer fills it with its inline 100%/100%. */
.m-chat-viewer-stage[b-408jgzmmfp] {
    flex: 1;
    min-height: 0;
}

.m-chat-viewer-svg[b-408jgzmmfp],
.m-chat-viewer-empty[b-408jgzmmfp] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--muted-foreground);
    font-size: .85rem;
}

/* ::deep, not a plain descendant: the SVG arrives as a MarkupString and therefore carries no
   scope attribute (same construct as Ergebnis/Konfigurator). */
.m-chat-viewer-svg[b-408jgzmmfp]  svg {
    max-width: 100%;
    max-height: 100%;
}

.m-chat-viewer-bar[b-408jgzmmfp] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--background);
}

.m-chat-price[b-408jgzmmfp] {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 650;
}

/* Compact pill so price + door + CTA fit one line on a 360 px screen. */
.m-chip-btn[b-408jgzmmfp] {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
    font-size: .85rem;
    cursor: pointer;
}

.m-chip-btn:disabled[b-408jgzmmfp] { opacity: .5; cursor: default; }

.m-chip-btn-primary[b-408jgzmmfp] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.m-chat-summary-config[b-408jgzmmfp] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: .8rem;
    line-height: 1.4;
    padding: 0 2px;
}

/* --- Voice mode --------------------------------------------------------- */

/* A spoken line that has not been committed to the transcript yet. Dimmed and dashed so it
   reads as "being heard", not as something already said and stored. */
.m-bubble-live[b-408jgzmmfp] {
    opacity: .62;
    border-style: dashed;
}

/* The call button lives in the input row next to the dictation mic — one row of controls,
   not two. Tinted so the two microphones are not mistaken for each other. It is also the
   whole status display: the states below are the former bar, on the control itself. */
.m-mic-live[b-408jgzmmfp] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* Waiting on the handshake — dimmed and breathing, tappable to give up. */
.m-mic-live[data-live-state="Connecting"][b-408jgzmmfp] {
    opacity: .6;
    animation: m-live-fade-b-408jgzmmfp 1.1s infinite ease-in-out;
}

/* Live. Red, because from here the tap hangs up. */
.m-mic-live[data-live-state="Listening"][b-408jgzmmfp],
.m-mic-live[data-live-state="Talking"][b-408jgzmmfp] {
    background: var(--destructive);
    border-color: var(--destructive);
    color: var(--primary-foreground);
}

/* The assistant is speaking — the one visual cue that the line is alive, since during a
   spoken turn there is nothing to read yet. */
.m-mic-live[data-live-state="Talking"][b-408jgzmmfp] {
    animation: m-live-pulse-b-408jgzmmfp 1.2s infinite ease-in-out;
}

@keyframes m-live-pulse-b-408jgzmmfp {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--destructive) 55%, transparent); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--destructive) 0%, transparent); }
}

@keyframes m-live-fade-b-408jgzmmfp {
    0%, 100% { opacity: .45; }
    50% { opacity: .85; }
}

/* Vestibular safety: the pulse is decoration, the colour carries the state. */
@media (prefers-reduced-motion: reduce) {
    .m-mic-live[data-live-state="Talking"][b-408jgzmmfp],
    .m-mic-live[data-live-state="Connecting"][b-408jgzmmfp] { animation: none; }
}

/* --- Input row ---------------------------------------------------------- */

.m-chat-input[b-408jgzmmfp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    position: sticky;
    bottom: 0;
    background: var(--background);
}

/* The field must eat the free space; ::deep because BbInput renders its own element. */
.m-chat-input[b-408jgzmmfp]  .m-chat-field {
    flex: 1;
    min-width: 0;
    min-height: var(--touch);
}

.m-mic[b-408jgzmmfp] {
    flex: 0 0 auto;
    width: var(--touch);
    height: var(--touch);
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
    font-size: 1.1rem;
    cursor: pointer;
}

.m-mic:disabled[b-408jgzmmfp] { opacity: .5; cursor: default; }

.m-mic-on[b-408jgzmmfp] {
    background: var(--destructive);
    color: var(--destructive-foreground);
    border-color: var(--destructive);
}
/* /Components/Pages/Ergebnis.razor.rz.scp.css */
.m-result-head[b-xjb7o23lsz] {
    display: flex;
    align-items: center;
    min-height: var(--touch);
    margin-bottom: 4px;
}

[b-xjb7o23lsz] .m-result-back {
    margin-left: -8px;
    color: var(--muted-foreground);
}

.m-result-empty[b-xjb7o23lsz] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 6vh;
}

/* --- Positions ---------------------------------------------------------- */

.m-positions[b-xjb7o23lsz] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.m-position[b-xjb7o23lsz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}

.m-position:last-child[b-xjb7o23lsz] { border-bottom: 0; }

.m-position-text[b-xjb7o23lsz] { color: var(--foreground); }

.m-position-flag[b-xjb7o23lsz] {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-left: 8px;
}

.m-position-price[b-xjb7o23lsz] {
    white-space: nowrap;
    font-weight: 600;
}

/* --- 3D ----------------------------------------------------------------- */

.m-viewer-section[b-xjb7o23lsz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-viewer[b-xjb7o23lsz] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--muted);
}

.m-viewer-controls[b-xjb7o23lsz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Server-rendered SVG carries no scope attribute. */
.m-preview-svg[b-xjb7o23lsz] { overflow-x: auto; }

.m-preview-svg[b-xjb7o23lsz]  svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Contact ------------------------------------------------------------ */

.m-contact-section[b-xjb7o23lsz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.m-section-title[b-xjb7o23lsz] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 8px 0 0;
}

.m-section-lead[b-xjb7o23lsz] {
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 8px;
}
/* /Components/Pages/Konfigurator.razor.rz.scp.css */
.m-preview[b-r8xcfwf291] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.m-preview-svg[b-r8xcfwf291] {
    margin-top: 10px;
    overflow-x: auto;
}

/* The SVG comes from the server as raw markup, so it carries no scope attribute. */
.m-preview-svg[b-r8xcfwf291]  svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}