@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';
@import '_content/ITKRazorComponents/ITKRazorComponents.pmf5e05cxr.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Builder/Panels/DisplayRules/DisplayRulesPanel.razor.rz.scp.css */
/* Bootstrap's .form-check-input has a built-in margin-top: .25em (baked in for baseline
   alignment next to a text label). With no label here, that asymmetric margin pushes the
   checkbox below true center in a flex row even with align-items-center — the margin box,
   not just the visible box, is what gets centered. */
.dr-check[b-k4f1kwnhok] {
    margin-top: 0;
}

.dr-check:checked[b-k4f1kwnhok] {
    background-color: var(--bs-displayrules);
    border-color: var(--bs-displayrules);
}

.dr-check:focus[b-k4f1kwnhok] {
    border-color: var(--bs-displayrules);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-displayrules-rgb), 0.25);
}

/* Hovering a row in the Display-Rules graph sidebar highlights the rule card(s) it belongs to
   here, in the main list — subtle so it reads as "related" rather than overpowering the card. */
.dr-rule-highlighted[b-k4f1kwnhok] {
    background-color: var(--bs-displayrules-bg-subtle) !important;
}
/* /Components/Builder/Panels/DisplayRules/DisplayRuleSummary.razor.rz.scp.css */
/* Shared sizing for the row-leading badges (WENN/UND/ODER/DANN) so rows line up regardless
   of label length or glyph width. */
.dr-badge-lead[b-uown638za8] {
    display: inline-block;
    min-width: 3.5rem;
    text-align: center;
}

.badge-wenn[b-uown638za8] {
    background-color: var(--bs-displayrules);
    color: #fff;
}

/* Shows the rule's action verb (e.g. "zeige") — same shared brand color as WENN/UND/ODER, but
   those are literal uppercase text in the markup while ActionVerb() returns lowercase (matching
   how display-rule action verbs read elsewhere, e.g. graph-sidebar tooltips), so uppercase is
   applied here via CSS instead of hardcoding a second, all-caps copy of each verb. */
.badge-action[b-uown638za8] {
    background-color: var(--bs-displayrules);
    color: #fff;
    text-transform: uppercase;
}

/* RequiredWhen's own DANN badge ("mache Pflicht") — same danger red used everywhere else
   RequiredWhen shows up (the "als Pflichtfeld markieren" action button, the graph sidebar's
   arrow), instead of the shared displayrules teal every other action's DANN badge uses. */
.badge-action-required[b-uown638za8] {
    background-color: var(--bs-danger);
    color: #fff;
    text-transform: uppercase;
}

/* The operator badge (ist/ist nicht/enthält/...) shown between a condition's field name and its
   comparison value — same brand color as WENN/UND/ODER/DANN, uppercased like badge-action, but
   without dr-badge-lead's fixed min-width since operator labels vary a lot in length. */
.badge-condition[b-uown638za8] {
    background-color: var(--bs-displayrules);
    color: #fff;
    text-transform: uppercase;
}

.badge-and[b-uown638za8] {
    background-color: var(--color-rule-and);
    color: #fff;
}

.badge-or[b-uown638za8] {
    background-color: var(--color-rule-or);
    color: #fff;
}
/* /Components/Builder/Panels/DisplayRules/TargetLocalDisplayRuleModal.razor.rz.scp.css */
/* Selected-state colors for the per-condition AND/OR combinator toggle — matches the
   badge colors used for the same combinators in DisplayRulesPanel's rule overview. */
.btn-rule-and[b-ad60q87fu5],
.btn-rule-and:hover[b-ad60q87fu5],
.btn-rule-and:focus[b-ad60q87fu5] {
    background-color: var(--color-rule-and);
    border-color: var(--color-rule-and);
    color: #fff;
}

.btn-rule-or[b-ad60q87fu5],
.btn-rule-or:hover[b-ad60q87fu5],
.btn-rule-or:focus[b-ad60q87fu5] {
    background-color: var(--color-rule-or);
    border-color: var(--color-rule-or);
    color: #fff;
}
/* /Components/Builder/Panels/FieldFunctions/FieldFunctionFormulaEditor.razor.rz.scp.css */
.ff-formula[b-0qqt4tsowa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    cursor: text;
    font-variant-numeric: tabular-nums;
}

    .ff-formula.is-focused[b-0qqt4tsowa] {
        border-color: var(--bs-fieldfunctions-border-subtle);
        box-shadow: 0 0 0 0.2rem var(--bs-fieldfunctions-bg-subtle);
        outline: none;
    }

    .ff-formula:focus-visible[b-0qqt4tsowa] {
        outline: none;
    }

.ff-formula-placeholder[b-0qqt4tsowa] {
    color: var(--bs-secondary-color);
}

.ff-formula-token[b-0qqt4tsowa] {
    padding: 0 0.1rem;
}

    .ff-formula-token.is-operator[b-0qqt4tsowa] {
        font-weight: 600;
        color: var(--bs-fieldfunctions);
    }

.ff-formula-chip[b-0qqt4tsowa] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.25rem 0.1rem 0.5rem;
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid var(--bs-fieldfunctions-border-subtle);
    background-color: var(--bs-fieldfunctions-bg-subtle);
    font-size: 0.875rem;
}

    .ff-formula-chip.is-missing[b-0qqt4tsowa] {
        border-color: var(--bs-danger-border-subtle);
        background-color: var(--bs-danger-bg-subtle);
    }

.ff-formula-chip-remove[b-0qqt4tsowa] {
    display: inline-flex;
    padding: 0.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    line-height: 1;
}

    .ff-formula-chip-remove:hover[b-0qqt4tsowa] {
        color: var(--bs-danger);
    }

.ff-formula-caret[b-0qqt4tsowa] {
    display: inline-block;
    width: 1px;
    height: 1.25rem;
    background-color: var(--bs-body-color);
    animation: ff-formula-blink-b-0qqt4tsowa 1s step-end infinite;
}

@keyframes ff-formula-blink-b-0qqt4tsowa {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-formula-caret[b-0qqt4tsowa] {
        animation: none;
    }
}

.ff-formula-op[b-0qqt4tsowa] {
    min-width: 2rem;
    font-weight: 600;
}

.ff-formula-decimals[b-0qqt4tsowa] {
    width: 4.5rem;
}
/* /Components/Builder/Panels/FieldFunctions/FieldFunctionsPanel.razor.rz.scp.css */
/* Bootstrap's .form-check-input has a built-in margin-top: .25em (baked in for baseline
   alignment next to a text label). With no label here, that asymmetric margin pushes the
   checkbox below true center in a flex row even with align-items-center — the margin box,
   not just the visible box, is what gets centered. */
.ff-check[b-6tln0efq1l] {
    margin-top: 0;
}

.ff-check:checked[b-6tln0efq1l] {
    background-color: var(--bs-fieldfunctions);
    border-color: var(--bs-fieldfunctions);
}

.ff-check:focus[b-6tln0efq1l] {
    border-color: var(--bs-fieldfunctions);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-fieldfunctions-rgb), 0.25);
}

/* Hovering a row in the Field-Functions graph sidebar highlights the function card(s) it
   belongs to here, in the main list — subtle so it reads as "related" rather than overpowering
   the card. */
.ff-function-highlighted[b-6tln0efq1l] {
    background-color: var(--bs-fieldfunctions-bg-subtle) !important;
}
/* /Components/Builder/Panels/Shared/DependencyGraph/DependencyGraphSidebar.razor.rz.scp.css */
.drg-sidebar[b-d872tbpbqw] {
    width: 42%;
    min-width: 420px;
    max-width: 760px;
}

.drg-legend[b-d872tbpbqw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.drg-graph[b-d872tbpbqw] {
    /* Grid (rather than flexbox) so the two tracks never fight over space via stretch/shrink
       negotiation. The SVG's viewBox (see the .razor code-behind) stretches its own virtual
       coordinate space to fill the gutter column, so a wider sidebar genuinely spreads the arcs
       out more. */
    display: grid;
    align-items: start;
}

.drg-row[b-d872tbpbqw] {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.4;
    border-radius: 0.25rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.12s, background 0.12s;
}

.drg-row:hover[b-d872tbpbqw] {
    background: var(--builder-treeview-item-hover-bg);
}

.drg-row--involved[b-d872tbpbqw] {
    opacity: 1;
}

.drg-row--dimmed[b-d872tbpbqw] {
    opacity: 0.15 !important;
}

.drg-row__icon[b-d872tbpbqw] {
    flex-shrink: 0;
    opacity: 0.7;
    font-size: 0.75rem;
}

.drg-row__label[b-d872tbpbqw] {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
}

.drg-row--block .drg-row__label[b-d872tbpbqw],
.drg-row--field .drg-row__label[b-d872tbpbqw] {
    color: var(--bs-secondary-color);
}

.drg-svg-wrap[b-d872tbpbqw] {
    position: relative;
}

.drg-svg[b-d872tbpbqw] {
    display: block;
}

.drg-edge[b-d872tbpbqw] {
    stroke-width: 1.75px;
    fill: none;
    cursor: pointer;
    pointer-events: stroke;
    /* Keeps the stroke's on-screen thickness constant regardless of the viewBox's non-uniform
       horizontal stretch (see the .razor code-behind) — without this, the same stroke-width
       renders visibly thicker/thinner depending on a curve segment's local angle relative to
       that stretch. */
    vector-effect: non-scaling-stroke;
    transition: opacity 0.12s, stroke-width 0.12s;
}

.drg-edge--and[b-d872tbpbqw] {
    stroke: var(--color-rule-and);
}

.drg-edge--or[b-d872tbpbqw] {
    stroke: var(--color-rule-or);
}

.drg-edge--then[b-d872tbpbqw] {
    stroke: var(--bs-displayrules);
}

/* RequiredWhen's own "then" arrow — same danger red as the "mache Pflicht" badge and the
   "als Pflichtfeld markieren" action button, distinct from every other action's displayrules teal. */
.drg-edge--then-required[b-d872tbpbqw] {
    stroke: var(--bs-danger);
}

.drg-edge--fieldfunction[b-d872tbpbqw] {
    stroke: var(--bs-fieldfunctions);
}

.drg-edge--inactive[b-d872tbpbqw] {
    stroke-dasharray: 3 2;
}

.drg-edge--dimmed[b-d872tbpbqw] {
    opacity: 0.1;
}

.drg-edge--highlighted[b-d872tbpbqw] {
    stroke-width: 2.75px;
}

/* Plain HTML, not SVG, so its size stays constant regardless of how much the arc gutter's
   SVG stretches horizontally (see the .razor code-behind) — an SVG <circle> there would
   distort into an ellipse under that same stretch. Fixed at 24x24 regardless of content
   (icon or text label) — both because every dot is itself a double-click target (WCAG 2.5.8
   minimum target size) and so a function's chain of dots reads as one consistent shape. */
.drg-edge-dot[b-d872tbpbqw] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.12s;
}

/* Bootstrap icons (field function operators) center via flex; text labels (drg-edge-dot__label,
   below) self-center via absolute positioning instead — see that rule's comment for why. */
.drg-edge-dot--icon[b-d872tbpbqw] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Min/Max/Concat's icons (ArrowDownShort/ArrowUpShort/Link45Deg) read awkwardly small and
   inconsistent with the other operator icons at the shared 0.75rem size — left at their own
   natural size (inherited from the dot) instead of overridden down. */
.drg-edge-dot--icon-ArrowDownShort[b-d872tbpbqw],
.drg-edge-dot--icon-ArrowUpShort[b-d872tbpbqw],
.drg-edge-dot--icon-Link45Deg[b-d872tbpbqw] {
    font-size: unset;
}

/* Uppercase/Lowercase's alphabet icons read a little small at the shared 0.75rem too. */
.drg-edge-dot--icon-Alphabet[b-d872tbpbqw],
.drg-edge-dot--icon-AlphabetUppercase[b-d872tbpbqw] {
    font-size: 0.9rem;
}

/* Centered geometrically against the dot's own box rather than via flex + line-height — font
   ascent/descent metrics reserve descender space even for glyphs that have none, which made
   flex's line-box centering consistently land a little low. */
.drg-edge-dot__label[b-d872tbpbqw] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.drg-edge-dot.drg-edge--and[b-d872tbpbqw] {
    background-color: var(--color-rule-and);
}

.drg-edge-dot.drg-edge--or[b-d872tbpbqw] {
    background-color: var(--color-rule-or);
}

.drg-edge-dot.drg-edge--then[b-d872tbpbqw] {
    background-color: var(--bs-displayrules);
}

.drg-edge-dot.drg-edge--then-required[b-d872tbpbqw] {
    background-color: var(--bs-danger);
}

.drg-edge-dot.drg-edge--fieldfunction[b-d872tbpbqw] {
    background-color: var(--bs-fieldfunctions);
}

.drg-edge-dot.drg-edge--dimmed[b-d872tbpbqw] {
    opacity: 0.1;
}

.drg-edge-dot.drg-edge--highlighted[b-d872tbpbqw] {
    border-width: 2px;
}

/* Disabled rule/function: dashed border matching the arc's own dashed stroke, with the fill
   swapped to the sidebar's own background — a truly transparent fill let the arc underneath show
   straight through the dot — and the content recolored to the kind's own color since white would
   be invisible against that light background. */
.drg-edge-dot.drg-edge--inactive[b-d872tbpbqw] {
    background-color: var(--builder-treeview-bg);
    border-style: dashed;
}

.drg-edge-dot.drg-edge--inactive.drg-edge--and[b-d872tbpbqw] {
    border-color: var(--color-rule-and);
    color: var(--color-rule-and);
}

.drg-edge-dot.drg-edge--inactive.drg-edge--or[b-d872tbpbqw] {
    border-color: var(--color-rule-or);
    color: var(--color-rule-or);
}

.drg-edge-dot.drg-edge--inactive.drg-edge--then[b-d872tbpbqw] {
    border-color: var(--bs-displayrules);
}

.drg-edge-dot.drg-edge--inactive.drg-edge--then-required[b-d872tbpbqw] {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.drg-edge-dot.drg-edge--inactive.drg-edge--fieldfunction[b-d872tbpbqw] {
    border-color: var(--bs-fieldfunctions);
    color: var(--bs-fieldfunctions);
}

/* Points into the target row an edge with an arrowhead terminates at. Every such arc converges
   on the row list at the same DotX regardless of its shape above, so a fixed left-pointing
   triangle (no per-edge rotation math needed) always lines up correctly — built from CSS borders
   since an SVG marker here would be stretched into a distorted shape by the same non-uniform
   scaling that affects <circle> (see .drg-edge-dot above). */
.drg-arrowhead[b-d872tbpbqw] {
    position: absolute;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid var(--bs-displayrules);
    pointer-events: none;
    transition: opacity 0.12s;
}

.drg-arrowhead.drg-edge--fieldfunction[b-d872tbpbqw] {
    border-right-color: var(--bs-fieldfunctions);
}

.drg-arrowhead.drg-edge--then-required[b-d872tbpbqw] {
    border-right-color: var(--bs-danger);
}

.drg-arrowhead.drg-edge--inactive[b-d872tbpbqw] {
    opacity: 0.5;
}

.drg-arrowhead.drg-edge--dimmed[b-d872tbpbqw] {
    opacity: 0.08;
}
/* /Components/Builder/Panels/Structure/BuilderSideBar.razor.rz.scp.css */
/* BuilderSidebar.razor.css */

.fb-sidebar[b-qke5jwhfy1] {
    width: 220px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Wraps a subheading's label together with the rule that fills the rest of the row — the rule
   starts right after the label (gap) and stops short of the row's own edge (inherited padding on
   whichever container sets it), so it reads as inset with margin on both sides rather than
   spanning edge-to-edge. */
.fb-section-label-row[b-qke5jwhfy1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fb-section-rule[b-qke5jwhfy1] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    opacity: 1;
    border: none;
    border-top: 1px solid var(--bs-border-color);
}

.fb-palette-item[b-qke5jwhfy1] {
    cursor: grab;
    user-select: none;
    transition: background 0.12s;
}

    .fb-palette-item:hover[b-qke5jwhfy1] {
        background: var(--bs-tertiary-bg);
    }

    .fb-palette-item:active[b-qke5jwhfy1] {
        cursor: grabbing;
    }

/* An entry's label and description wrap rather than widening the sidebar: a long word hyphenated
   (German rules, the page's lang; a soft hyphen in the text where it's known to be needed), and
   broken anywhere only as the last resort. */
.fb-palette-text[b-qke5jwhfy1] {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* The arrow that opens an entry's presets ("Text" → E-Mail, IBAN, …). */
.fb-palette-expand[b-qke5jwhfy1] {
    color: var(--bs-secondary-color);
}

    .fb-palette-expand:hover[b-qke5jwhfy1] {
        background: var(--bs-tertiary-bg);
    }

.fb-palette-children[b-qke5jwhfy1] {
    border-left: 1px solid var(--bs-border-color);
    margin-left: 0.75rem;
    padding-left: 0.25rem;
    min-width: 0;
}

.fb-hint[b-qke5jwhfy1] {
    line-height: 1.7;
}
/* /Components/Builder/Panels/Structure/BuilderTutorialKeyword.razor.rz.scp.css */
.fb-tutorial-keyword[b-bl4mz8l7ie] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8em;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
    margin: 0 0.15em;
}
/* /Components/Builder/Panels/Structure/Dropzones/DropZone.razor.rz.scp.css */
/* DropZone.razor.css */

.fb-dropzone[b-2q04mjw3i1] {
    border-radius: 6px;
    border: 2px dashed transparent;
    transition: border-color 0.15s, background 0.15s, height 0.15s, margin 0.15s;
    /* Default: invisible thin gap — expands via global CSS when .fb-dropzone-armed. Without this,
       the "+" icon (see the .razor markup) visually overflows the 2px box instead of being
       clipped by it, rendering as an inert glyph floating below the zone's real (tiny) hit-area. */
    overflow: hidden;
    height: 2px;
    margin: 1px 0;
}

/* Empty-state prompt: always full-height so the hint text is readable */
.fb-dropzone-prompt[b-2q04mjw3i1] {
    height: 48px;
    margin: 6px 0;
    border-color: var(--bs-border-color) !important;
}

/* Applied by JS on dragover */
.fb-dropzone-over[b-2q04mjw3i1] {
    border-color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    height: 36px !important;
    margin: 4px 0 !important;
}

.fb-dropzone-label[b-2q04mjw3i1] {
    white-space: nowrap;
    align-items: center;
    display: flex;
    justify-content: center;
}
/* /Components/Builder/Panels/Structure/Dropzones/SplitDropZone.razor.rz.scp.css */
/* SplitDropZone.razor.css */

.fb-split-dropzone[b-x0ug958dty] {
    position: relative;
    border-radius: 6px;
    border: 2px dashed transparent;
    transition: height 0.15s, margin 0.15s, border-color 0.15s, background 0.15s;
    overflow: hidden;
    /* Default: invisible thin gap — expands via global CSS when .fb-dropzone-armed */
    height: 2px;
    margin: 1px 0;
}

    /* Parent expands when hovered (real drag) or activated (click/keyboard mode) — same target
       size either way, so the two interaction paths read as the same component. */
    .fb-split-dropzone.fb-dropzone-over[b-x0ug958dty],
    .fb-split-dropzone.fb-split-expanded[b-x0ug958dty] {
        height: 60px !important;
        margin: 4px 0;
    }

.fb-split-dropzone-vertical[b-x0ug958dty] {
    position: relative;
    border-radius: 6px;
    transition: width 0.15s, margin 0.15s;
    overflow: hidden;
    /* Default: invisible thin gap — expands via global CSS when .fb-dropzone-armed */
    width: 12px;
    margin: 1px 0;
}

    /* Parent expands when hovered (real drag) or activated (click/keyboard mode). */
    .fb-split-dropzone-vertical.fb-dropzone-over[b-x0ug958dty],
    .fb-split-dropzone-vertical.fb-split-expanded[b-x0ug958dty] {
        width: 164px !important;
        height: 60px !important;
        margin: 4px 0;
    }

.fb-split-dropzone-half[b-x0ug958dty] {
    flex: 1;
    border-radius: 4px;
    border: 2px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

/* The halves are real <button> elements (native keyboard activation once expanded) — strip the
   browser's own button chrome so they still look exactly like the plain divs they used to be. */
button.fb-split-dropzone-half[b-x0ug958dty] {
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Click/keyboard mode's compact "+" affordance — shown only while armed-but-not-yet-expanded
   (hidden again once expanded, when the Neu/Wiederverwenden labels take over). Never shown during
   a real drag hover, which has its own fade-in label treatment below. */
.fb-split-dropzone-plus[b-x0ug958dty] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.fb-dropzone-click-armed > .fb-split-dropzone-plus[b-x0ug958dty] {
    opacity: 1;
}

.fb-split-half-hidden[b-x0ug958dty] {
    flex: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-color: transparent !important;
}

.fb-dropzone-over > .fb-split-dropzone-left[b-x0ug958dty],
.fb-split-expanded > .fb-split-dropzone-left[b-x0ug958dty] {
    border-color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.fb-dropzone-over > .fb-split-dropzone-right[b-x0ug958dty],
.fb-split-expanded > .fb-split-dropzone-right[b-x0ug958dty] {
    border-color: var(--bs-success) !important;
    background: rgba(var(--bs-success-rgb), 0.08) !important;
}

.fb-split-dropzone-label[b-x0ug958dty] {
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    font-size: 0.75rem;
}

/* In a row the halves are only about 75px wide — "Kopie", "Wiederverwenden" and "Hierher
   verschieben" would be cut off there. Only the icons show; the text stays for screen readers
   (Bootstrap's visually-hidden). */
.fb-split-dropzone-vertical .fb-split-dropzone-text[b-x0ug958dty] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Label fades in once the parent has expanded (real drag hover) or been activated
   (click/keyboard mode) — covers both orientations. */
.fb-split-dropzone.fb-dropzone-over .fb-split-dropzone-label[b-x0ug958dty],
.fb-split-dropzone-vertical.fb-dropzone-over .fb-split-dropzone-label[b-x0ug958dty],
.fb-split-dropzone.fb-split-expanded .fb-split-dropzone-label[b-x0ug958dty],
.fb-split-dropzone-vertical.fb-split-expanded .fb-split-dropzone-label[b-x0ug958dty] {
    opacity: 1;
}

/* Keyboard focus on a half in a row: it takes most of the width and shows its words — with only
   the icons, a sighted keyboard user couldn't tell "Wiederverwenden" from "Neu" (the title is a
   mouse tooltip). */
.fb-split-dropzone-vertical .fb-split-dropzone-half:focus-visible[b-x0ug958dty] {
    flex: 4;
}

    .fb-split-dropzone-vertical .fb-split-dropzone-half:focus-visible .fb-split-dropzone-text[b-x0ug958dty] {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
    }
/* /Components/Builder/Panels/Structure/Subcomponents/BlockSection.razor.rz.scp.css */
/* BlockSection.razor.css */

/* Marks a non-editable block's content area — fields are still visible (and viewable
   sources may still need to read them), just not insertable/reorderable here. */
.fb-block-content-readonly[b-lvyzqpqxzv] {
    background-color: var(--bs-secondary-bg-subtle, #e2e3e5);
    border-radius: 0 0 6px 6px;
}

/* Selected-row highlight — mirrors the selected-field/selected-block treatment (border + subtle
   background, see BuilderFieldContent's CssClass / this file's own IsSelected class on the card
   root) rather than a bare focus outline, so a row reads the same way any other selected item
   does. Scoped to multi-field rows only, since a solo-field row is never independently selectable
   as a "row" (its one field gets the highlight instead). Negative margin offsets the added
   border+padding so toggling selection never shifts surrounding rows. */
.fb-row-selected[b-lvyzqpqxzv] {
    border: 2px solid var(--bs-primary);
    border-radius: 6px;
    background: rgba(var(--bs-primary-rgb), 0.05);
    padding: 2px;
    margin: -2px;
}
/* /Components/Builder/Panels/Structure/Subcomponents/BuilderFieldContent.razor.rz.scp.css */
.field-text-content[b-knouqb3r3d] {
    font-size: 0.75rem;
}

.fb-field-card[b-knouqb3r3d] {
    height: 60px;
    container-type: inline-size;
    container-name: fb-field-card;
    transition: border-color 0.15s;
}

    .fb-field-card:hover[b-knouqb3r3d] {
        border-color: var(--bs-primary) !important;
    }

.fb-field-actions-compact[b-knouqb3r3d] {
    display: none;
}

/* Label line and key line: one line each — wrapping would drop badges below the fixed card
   height. The label and the key give way first (.fb-field-ellipsis), then the badges
   (.fb-prop-badge). */
.fb-field-line[b-knouqb3r3d] {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

    /* Room for the rule badges' 2px outline, which the clipping would cut off — without moving
       anything. */
    .fb-field-line:first-child[b-knouqb3r3d] {
        padding: 2px;
        margin: -2px;
    }

/* Cut to whatever width is left — a checkbox's label is often a whole sentence, keys get long —
   with the full text on hover (title). A few characters always stay, so many badges can't push
   the label out of sight. The huge flex-shrink makes it take all of a line's overflow first:
   flex shrinking otherwise spreads it over every item, and the badges would be cut while the
   label is still wide. */
.fb-field-ellipsis[b-knouqb3r3d] {
    flex-shrink: 100000;
    min-width: min(3ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Once the label is down to those few characters, each badge shrinks to a short pill ("P…",
   full text on hover) instead of the last ones being cut off unseen. :where keeps this at the
   narrow-card rule's specificity, so that rule (later in this file) still turns them into signs. */
:where(.fb-field-line) > .fb-prop-badge[b-knouqb3r3d] {
    min-width: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marks a badge as coming from a display rule rather than the field's own static settings —
   same fill as the badge it borrows its color from (danger for Pflicht, displayrules teal for
   everything else), plus a dashed outline in that same color so it reads as distinct at a glance
   from every other (plain, borderless) badge on the row. */
.fb-badge-rule-required[b-knouqb3r3d] {
    outline: 2px dashed var(--bs-danger);
}

.fb-badge-rule[b-knouqb3r3d] {
    outline: 2px dashed var(--bs-displayrules);
}


@container fb-field-card (max-width: 400px) {
    .fb-type-meta[b-knouqb3r3d] {
        display: none;
    }

    /* Each badge as its short sign ("P", "W", "V" …, data-short) in its own colours — dots in
       colour alone told Pflicht from Validierung only to those who see the colours (WCAG 1.4.1).
       The full text stays, at zero size, for screen readers and the hover title; the sign is
       hidden from them ("/ ''"). */
    .fb-prop-badge[data-short][b-knouqb3r3d] {
        min-width: 0;
        padding: 0.2rem 0.35rem;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
        font-size: 0;
        line-height: 1;
    }

        .fb-prop-badge[data-short][b-knouqb3r3d]::after {
            content: attr(data-short);
            content: attr(data-short) / "";
            font-size: 0.65rem;
        }

    .fb-field-actions-full[b-knouqb3r3d] {
        display: none;
    }

    .fb-field-actions-compact[b-knouqb3r3d] {
        display: flex;
    }
}
/* /Components/Builder/Panels/Structure/Subcomponents/EditFieldModal.razor.rz.scp.css */
/* Fixed-width readouts next to the width/height sliders, so the slider itself doesn't jump
   around as the displayed number changes width (e.g. "6 / 12" vs "12 / 12"). */
.field-edit-readout-width[b-mq87zfdhav] {
    min-width: 48px;
}

.field-edit-readout-height[b-mq87zfdhav] {
    min-width: 64px;
}

/* Compact label box for the width-preview row (moved here from BlockSection.razor.css when the
   edit modal was split into its own component — CSS isolation scopes it to whichever component's
   markup carries it, so it has to live wherever that markup actually renders now). Not reused by
   the height-preview bar below: its height needs to vary (height-preview-bar-N), and this class's
   fixed height would otherwise depend on unpredictable rule ordering to lose that fight. */
.field-col-preview[b-mq87zfdhav] {
    height: 32px;
    font-size: 11px;
}

/* ── Spacer height preview ────────────────────────────────────────────────────
   The container's height and the neighbor boxes' height are small, bounded sets of values
   (element count is 1-3; the bar is 0-MaxSpacerHeightRem), so they're enumerated as static
   classes here instead of computed inline styles. If MaxSpacerHeightRem or
   NeighborPreviewHeightRem change in EditFieldModal.razor, the values below must be updated
   to match:
     container height = (elementCount - 1) * NeighborPreviewHeightRem + MaxSpacerHeightRem
                         + elementCount * 1rem (each box's own 0.5rem top + bottom margin)
     neighbor height   = NeighborPreviewHeightRem
     bar height N      = N rem, for N from 0 to MaxSpacerHeightRem
*/

.height-preview-container[b-mq87zfdhav] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Only the spacer bar itself present (no previous/next row). */
.height-preview-container-1[b-mq87zfdhav] {
    height: 11rem;
}

/* The spacer bar plus one neighbor (previous- or next-only). */
.height-preview-container-2[b-mq87zfdhav] {
    height: 14rem;
}

/* The spacer bar with both a previous and a next neighbor. */
.height-preview-container-3[b-mq87zfdhav] {
    height: 17rem;
}

.height-preview-neighbor[b-mq87zfdhav] {
    height: 3rem;
}

.height-preview-bar[b-mq87zfdhav] {
    min-height: 1.5rem;
    font-size: 11px;
}

.height-preview-bar-0[b-mq87zfdhav] {
    height: 0rem;
}

.height-preview-bar-1[b-mq87zfdhav] {
    height: 1rem;
}

.height-preview-bar-2[b-mq87zfdhav] {
    height: 2rem;
}

.height-preview-bar-3[b-mq87zfdhav] {
    height: 3rem;
}

.height-preview-bar-4[b-mq87zfdhav] {
    height: 4rem;
}

.height-preview-bar-5[b-mq87zfdhav] {
    height: 5rem;
}

.height-preview-bar-6[b-mq87zfdhav] {
    height: 6rem;
}

.height-preview-bar-7[b-mq87zfdhav] {
    height: 7rem;
}

.height-preview-bar-8[b-mq87zfdhav] {
    height: 8rem;
}

.height-preview-bar-9[b-mq87zfdhav] {
    height: 9rem;
}

.height-preview-bar-10[b-mq87zfdhav] {
    height: 10rem;
}

/* ── Format check cards (Validierung → Formatprüfung) ─────────────────────────
   Buttons styled as cards, so a whole card is one click target and keyboard-reachable. */
.field-format-card[b-mq87zfdhav] {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.field-format-card:hover[b-mq87zfdhav] {
    border-color: var(--bs-primary-border-subtle);
}

.field-format-card:focus-visible[b-mq87zfdhav] {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.field-format-card--selected[b-mq87zfdhav] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.field-format-card[b-mq87zfdhav]  .field-format-card__check {
    color: var(--bs-primary);
}

/* Regex hint pointing to a format check: the manual's info pair (#185A93 on #E6F0F8, 6.22:1, k360
   manual Kap. 4.4) — a hint, not a selected state. */
.field-format-hint[b-mq87zfdhav] {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle) !important;
}

.field-format-hint[b-mq87zfdhav]  .bi {
    color: inherit;
}

[data-bs-theme="dark"] .field-format-hint[b-mq87zfdhav] {
    color: #c5cae9;
    background-color: #1a1f3d;
    border-color: #303f9f !important;
}
/* /Components/Builder/Panels/Structure/Subcomponents/FieldTypePickerModal.razor.rz.scp.css */
.fb-type-picker-grid[b-er4wnggvy5] {
    display: grid;
    /* 2 columns for now — every current "Auswahl" group has exactly 2 concrete variants. Revisit if
       a group ever grows a third. */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.75rem;
}

.fb-type-picker-tile[b-er4wnggvy5] {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    background-color: transparent;
    text-align: left;
}

.fb-type-picker-tile:hover[b-er4wnggvy5] {
    border-color: var(--bs-primary);
}

.fb-type-picker-tile:focus-visible[b-er4wnggvy5] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.fb-type-picker-tile-selected[b-er4wnggvy5] {
    border-width: 2px;
}

/* The embedded preview is illustrative only, never interactive — every focusable control inside is
   tabindex="-1" rather than disabled (disabled would repaint it in the browser's grayed-out disabled
   style, which isn't wanted here), and pointer-events:none is defense in depth so a click always
   lands on the tile itself (selecting it), never on the control. Fills whatever height the tile has
   left below its header. */
.fb-type-picker-preview[b-er4wnggvy5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.fb-type-picker-preview .form-check[b-er4wnggvy5] {
    margin-bottom: 0;
}

/* Medal colors for the ranking previews' Podium theme now live in site.scss (global, not
   component-scoped) — see that file's own comment for why. */
/* /Components/Fields/EnumSearchDropdownField.razor.rz.scp.css */
.enum-search-dropdown-menu[b-4f4u1o111o] {
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1050;
}

.enum-search-dropdown-menu .dropdown-item[b-4f4u1o111o] {
    cursor: pointer;
}

/* Bootstrap's own .dropdown-item:active/:focus default to the primary color (meant for a real
   navigation dropdown) — this is a toggle, not a navigation choice, so hover/focus/press all get the
   same quiet secondary-subtle highlight instead. */
.enum-search-dropdown-menu .dropdown-item:hover[b-4f4u1o111o],
.enum-search-dropdown-menu .dropdown-item.is-active[b-4f4u1o111o],
.enum-search-dropdown-menu .dropdown-item:active[b-4f4u1o111o] {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-emphasis-color);
}

/* The keyboard-highlighted option (aria-activedescendant) needs more than a tint to be seen. */
.enum-search-dropdown-menu .dropdown-item.is-active[b-4f4u1o111o] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* The search input sits borderless inside the box that looks like the field - the box shows the
   focus ring (one on the input would be drawn inside the box). */
.enum-search-input[b-4f4u1o111o] {
    outline: none;
    min-width: 6rem;
    background: transparent;
}

.enum-search-dropdown .form-control:focus-within[b-4f4u1o111o] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5);
}

/* Remove buttons on the chips: at least 24 px to hit (WCAG 2.5.8). */
.enum-search-chip-remove[b-4f4u1o111o] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background-size: 0.6rem;
}
/* /Components/Fields/FileField.razor.rz.scp.css */
/* Removing a file or stopping its upload: an icon, with a click area of at least 24 px. */
.file-field__remove[b-5rux7nrz6n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.file-field__progress[b-5rux7nrz6n] {
    max-width: 12rem;
    /* The track alone is barely visible on white (about 1.1:1) — an edge of at least 3:1 (WCAG 1.4.11). */
    border: 1px solid var(--bs-secondary-color);
    --bs-progress-height: 0.5rem;
}
/* /Components/Fields/IbanField.razor.rz.scp.css */
/* An IBAN is at most 34 characters plus the spaces between its groups of four. */
.iban-field[b-n8sy9hzn36] {
    max-width: 32em;
}
/* /Components/Fields/LicensePlateField.razor.rz.scp.css */
/* The country: flag and distinguishing sign, sized for the longest sign (three letters). The toggle
   is BlazorBootstrap's button, hence ::deep; it's made to look like the inputs next to it. */
.field[b-64esjzo8lw]  .plate-country__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 6.25rem;
    padding: .375rem .75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.field[b-64esjzo8lw]  .plate-country__toggle::after {
    margin-left: auto;
}

.field[b-64esjzo8lw]  .plate-country__menu {
    max-height: 20rem;
    overflow-y: auto;
}

.field[b-64esjzo8lw]  .plate-country__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Keeps its width (set inline, per part) inside the input-group the Addon puts the last part in —
   against Bootstrap's ".input-group > .form-control" (flex: 1 1 auto), which site.css loads after this. */
.input-group > .plate-part[b-64esjzo8lw] {
    flex: none;
}

.plate-flag[b-64esjzo8lw] {
    flex: none;
    width: 1.5em;
    height: 1.125em;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.plate-sign[b-64esjzo8lw] {
    min-width: 2em;
    font-weight: 600;
}

.plate-country__name[b-64esjzo8lw] {
    color: var(--bs-secondary-color);
    font-size: .875em;
}
/* /Components/Fields/PhoneNumberField.razor.rz.scp.css */
/* The country select stays narrow enough for the number to sit beside it; the full name is in
   its list. */
.phone-country .form-select[b-8esa8rms81] {
    max-width: 14rem;
}

.phone-number[b-8esa8rms81] {
    flex: 1 1 10rem;
    min-width: 10rem;
}

.phone-flag[b-8esa8rms81] {
    width: 1.5em;
    height: 1.125em;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
/* /Components/Fields/PostalCodeField.razor.rz.scp.css */
/* Four digits - wider would suggest more. With the prefill badge (input-group) it needs room. */
.postal-code-field[b-6yjge9t9zj] {
    max-width: 7.5em;
}

.postal-code-field.input-group[b-6yjge9t9zj] {
    max-width: 20em;
}
/* /Components/Fields/SocialSecurityNumberField.razor.rz.scp.css */
/* Sized for the digits each part takes (plus the input's padding and border). */
.svnr-number[b-10holvpv3c] {
    width: calc(4ch + 1.75rem + 2px);
}

.svnr-birth-date[b-10holvpv3c] {
    width: calc(6ch + 1.75rem + 2px);
}

/* Keeps its width inside the input-group the Addon puts it in — against Bootstrap's
   ".input-group > .form-control" (flex: 1 1 auto; width: 1%), which site.css loads after this. */
.input-group > .svnr-birth-date[b-10holvpv3c] {
    flex: none;
    width: calc(6ch + 1.75rem + 2px);
}
/* /Components/Interaction/Dialog/ChoiceButton.razor.rz.scp.css */
.choice-btn[b-sc3zhxfv0p] {
    border: 1px solid var(--bs-border-color, var(--color-border));
    border-radius: 999px;
    background: var(--bs-body-bg, var(--color-bg-white));
    color: var(--bs-body-color, var(--color-text-dark));
    padding: 0.42rem 0.85rem;
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .choice-btn:hover:not(:disabled)[b-sc3zhxfv0p] {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.07);
        color: var(--bs-primary);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
    }

    .choice-btn:focus-visible[b-sc3zhxfv0p] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.22), 0 3px 8px rgba(15, 23, 42, 0.1);
    }

.choice-btn:disabled[b-sc3zhxfv0p] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* The stored answer. Tinted rather than filled with the theme colour: the citizen may still change it,
   so it reads as "this is what stands here" and not as the button to press next. Carries a check icon
   from the call site as well, because colour alone must not be the only signal. */
.choice-btn--selected[b-sc3zhxfv0p] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-weight: 600;
}

.choice-btn > span[b-sc3zhxfv0p] {
    overflow-wrap: anywhere;
}
/* /Components/Interaction/Dialog/ConversationComposer.razor.rz.scp.css */
/* Its own small card, styled the same restrained way as a field card: a border, a rounded corner, and
   nothing about the box that invites dragging it around. */

/* Pinned to the bottom of .conversation-runner__main — the ancestor that actually scrolls (see its own
   overflow-y) at every width now, not only on a wide screen, so the citizen's next answer never has to
   be chased down the page as the transcript above it grows, and never ends up floating over transcript
   content that runs in underneath it on a narrow screen either. */
.composer[b-ltcg6bozga],
.composer__unavailable[b-ltcg6bozga] {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.composer[b-ltcg6bozga] {
    min-width: 0;
    padding: clamp(0.65rem, 2.5vw, 1.1rem) clamp(0.75rem, 3vw, 1.25rem);
    /* A touch of the same accent every field card's icon square carries — enough that this box reads
       as the one place the assistant is listening, without resorting to colour alone: the badge, icon
       and subtitle below say so in words too. */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 0.85rem;
    /* Opaque, not just for its own look — content scrolls up behind this box once it sticks, and
       without a solid background that content would show through underneath the composer's text. */
    background: var(--bs-body-bg);
}

/* Skip, the input and Send stay side by side at every width — see the markup's own comment on why
   there is deliberately no media query below that moves any of these onto a second line. */
.composer__row[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.composer__input-wrap[b-ltcg6bozga] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

/* A slim, single-line-by-default box — the chat-window look the citizen already knows from every
   messaging app. Enter still sends and Shift+Enter still inserts a line break (see OnKeyDownAsync);
   rather than scrolling internally once that happens, the box grows to fit (see dialog.js's own
   autosizeTextarea, called after every change ConversationComposer makes to _text). */
.composer__input[b-ltcg6bozga] {
    width: 100%;
    min-height: 2.75rem;
    /* Right padding reserves room for .composer__mic, which sits inside this box's own right edge —
       without it, typed text would run in underneath the button instead of stopping short of it. */
    padding: 0.55rem 3rem 0.55rem 1rem;
    resize: none;
    overflow-y: hidden;
}

[b-ltcg6bozga] .composer__skip,
[b-ltcg6bozga] .composer__send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
}

/* Inside .composer__input-wrap's own right edge, vertically centred over the single-line input — see
   the markup's own comment. Circular and slightly smaller than Skip/Send so it visually reads as part
   of the input itself rather than a third full-size button crowded next to it. */
[b-ltcg6bozga] .composer__mic {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 50%;
    border-width: 0;
}

[b-ltcg6bozga] .composer__mic:hover:not(:disabled) {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

/* Bootstrap's own compiled .btn-primary rule (wwwroot/css/site.css, built once at compile time from
   the SASS $primary literal) sets --bs-btn-disabled-bg/--bs-btn-disabled-border-color to that same
   literal — a plain one-class selector a per-municipality override has to out-specify explicitly,
   since a custom property is an ordinary property for cascade purposes and nothing here scopes more
   tightly to this exact button than that global rule otherwise would. Read the same --municipality-
   color custom property every other themed control does (see Form.razor.css), with Bootstrap's own
   variable as a fallback for the classic (non-municipality) pages that never set it. */
[b-ltcg6bozga] .composer__send:disabled {
    background-color: var(--municipality-color, var(--bs-primary));
    border-color: var(--municipality-color, var(--bs-primary));
}

/* Above .composer__row (the textarea/buttons), not below it — a citizen glancing at the box should
   see "recording" before they see the row it affects, not after. */
.composer__mic-error[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    color: var(--bs-danger);
    font-size: 0.8rem;
}

.composer__mic-status[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.composer__mic-notice[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.composer__mic-dot[b-ltcg6bozga] {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--bs-danger);
    animation: composer-mic-pulse-b-ltcg6bozga 1.4s ease-in-out infinite;
}

@keyframes composer-mic-pulse-b-ltcg6bozga {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Clear and the character count, below the input rather than overlapping it — see the markup's own
   comment. margin-left: auto on the count (rather than justify-content: space-between on this row)
   keeps the count pinned to the right edge whether or not Clear is even rendered. */
.composer__meta[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding-inline: 0.25rem;
}

[b-ltcg6bozga] .composer__clear {
    padding: 0.1rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    text-decoration: none;
}

[b-ltcg6bozga] .composer__clear:hover {
    color: var(--bs-danger);
    text-decoration: underline;
}

.composer__count[b-ltcg6bozga] {
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.composer__disclaimer[b-ltcg6bozga] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

[b-ltcg6bozga] .composer__disclaimer-icon {
    flex: 0 0 auto;
    color: var(--bs-primary);
}

/* A phone's bottom bar is precious — the reminder stays, a step smaller. */
@media (max-width: 575.98px) {
    .composer__disclaimer[b-ltcg6bozga] {
        font-size: 0.68rem;
        line-height: 1.3;
    }
}

.composer__unavailable[b-ltcg6bozga] {
    background: var(--bs-body-bg);
}

.composer__unavailable[b-ltcg6bozga]  .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
}

@media (max-width: 575.98px) {
    /* Narrower gutters only — the row itself still never wraps (see .composer__row's own comment). */
    .composer[b-ltcg6bozga] {
        padding: 0.85rem 0.9rem;
    }

    .composer__row[b-ltcg6bozga] {
        gap: 0.4rem;
    }

    [b-ltcg6bozga] .composer__skip,
    [b-ltcg6bozga] .composer__send {
        width: 2.5rem;
        height: 2.5rem;
    }
}
/* /Components/Interaction/Dialog/ConversationRunner.razor.rz.scp.css */
/* Rules that target a BlazorBootstrap component use ::deep, because a child component's root element
   never carries this component's CSS-isolation attribute. Each such component therefore sits inside an
   element of this component's own, which is what ::deep hangs off. */

/* The dialog's own column: the main area of Form.razor's shell, beside the sidebar on a wide screen
   (the sidebar itself is rendered into the page's drawer — see the SectionContent in the markup and
   Form.razor.css). Form.razor.css gives that main area exactly the height left below the header, at
   every width; this column fills it, so the page itself never has to scroll for this view under
   ordinary circumstances. */
.conversation-runner[b-vq8uwc6jy9] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

.conversation-runner__main[b-vq8uwc6jy9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    /* flex-basis 0 with min-height 0: exactly the runner's height, never its content's — so the scroll
       wrapper below has something smaller than its content to clip against. */
    flex: 1 1 0;
    min-height: 0;
    /* Was a <main>, which BlazorBootstrap's stylesheet gives overflow-x: hidden — kept, so nothing
       wide ever adds a sideways scrollbar to the column. */
    overflow-x: hidden;
    /* A safety net, not the normal path: .conversation-runner__cards is deliberately fixed
       (flex: 0 0 auto, no shrink, no scroll of its own — see its own rule) so the cards a citizen is
       answering never drift out of view as chat grows underneath. But that also means cards alone
       taller than this column's own height (a big block's worth of cards, larger OS text scaling)
       would otherwise have nowhere to go at all, with .conversation-runner__scroll shrunk to nothing
       and the composer pushed out of reach. This never engages in the ordinary case — cards and the
       inner-clipped chat already fit within 100% — it only catches the pathological one, scrolling the
       whole column together rather than silently losing the composer. */
    overflow-y: auto;
    /* No padding here on purpose — this element also distributes flex-grow space down to the
       composer (see .conversation-runner__scroll below). Padding on that same element reliably left
       the composer short of the sidebar's own bottom edge in practice (confirmed by removing it, with
       nothing else changed, fixing the alignment) — and moving the padding one level deeper onto a
       wrapper div reproduced the identical bug, so the fix is to drop it rather than relocate it.
       Insets for the content itself now come from the content's own components (composer's card
       padding, card gaps) instead. */
}

/* The cards column: fixed in place, never part of the scrolling region below it — a citizen answering
   one card must not see it, and every card beside it, drift out of view as the chat grows underneath. */
.conversation-runner__cards[b-vq8uwc6jy9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 auto;
}

/* The running chat, and only the running chat — the composer (this element's other flex sibling,
   outside this wrapper) always sits at the true bottom of .conversation-runner__main's own height,
   unconditionally, rather than only once this content already overflows it: a chat that grows past
   this box's height scrolls internally instead of running in behind the composer as the whole page
   scrolled. ConversationRunner.MaybeScrollChatToBottomAsync keeps this element itself scrolled to its
   newest bubble as the transcript grows, via dialog.js's own scrollToBottom(element) setting this
   element's scrollTop directly — never the browser's scrollIntoView on a trailing marker, which used to
   walk up and scroll an ANCESTOR instead on a narrow/short viewport (the stacked mobile layout below, or
   the .conversation-runner__main safety-net scroll), carrying the composer out of view right after
   answering. Assigning scrollTop on this element specifically cannot repeat that. */
.conversation-runner__scroll[b-vq8uwc6jy9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ── Loading, retry, completion ──────────────────────────────────────────── */

.conversation-runner__loading[b-vq8uwc6jy9] {
    padding: 2.5rem 0;
    text-align: center;
}

[b-vq8uwc6jy9] .conversation-runner__complete .alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0;
    padding: 0.9rem 1.05rem;
    border-radius: 0.5rem;
}

[b-vq8uwc6jy9] .conversation-runner__complete-icon {
    flex: 0 0 auto;
    font-size: 1.3rem;
}

.conversation-runner__complete-text[b-vq8uwc6jy9] {
    font-size: 0.88rem;
    opacity: 0.85;
}

@media (max-width: 575.98px) {
    /* "Antrag prüfen" spans the row rather than being squeezed beside two lines of prose. */
    [b-vq8uwc6jy9] .conversation-runner__complete .alert > .btn {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* ── A repeatable block with no entries yet ──────────────────────────────── */

.conversation-runner__empty-group[b-vq8uwc6jy9] {
    padding: 1.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.65rem;
    text-align: center;
}

.conversation-runner__empty-group-title[b-vq8uwc6jy9] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.conversation-runner__empty-group-text[b-vq8uwc6jy9] {
    margin: 0 0 1rem;
    color: var(--bs-secondary-color);
}

/* ── "Ask as one" escape hatch and the section grid's expand toggle ─────── */

[b-vq8uwc6jy9] .conversation-runner__manual-toggle,
[b-vq8uwc6jy9] .conversation-runner__expand-toggle {
    align-self: flex-start;
    padding: 0.2rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
    text-decoration: none;
}

[b-vq8uwc6jy9] .conversation-runner__manual-toggle:hover,
[b-vq8uwc6jy9] .conversation-runner__expand-toggle:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* /Components/Interaction/Dialog/DialogAnswerSummary.razor.rz.scp.css */
.applied[b-7v0cwz2gvi] {
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--bs-success-border-subtle, var(--bs-border-color));
    border-radius: 0.5rem;
    background: var(--bs-success-bg-subtle, var(--bs-tertiary-bg));
}

.applied__head[b-7v0cwz2gvi] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

[b-7v0cwz2gvi] .applied__icon {
    flex: 0 0 auto;
    color: var(--bs-success-text-emphasis, var(--bs-success));
}

.applied__title[b-7v0cwz2gvi] {
    min-width: 0;
    color: var(--bs-success-text-emphasis, var(--bs-body-color));
    font-size: 0.9rem;
    font-weight: 600;
}

/* Taken back: the same receipt, muted, its values struck through — still readable as what was said. */
.applied--undone[b-7v0cwz2gvi] {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.applied--undone[b-7v0cwz2gvi]  .applied__icon,
.applied--undone .applied__title[b-7v0cwz2gvi] {
    color: var(--bs-secondary-color);
}

.applied--undone .applied__value[b-7v0cwz2gvi] {
    color: var(--bs-secondary-color);
    font-weight: 400;
    text-decoration: line-through;
}

[b-7v0cwz2gvi] .applied__undo {
    flex: 0 0 auto;
    margin-left: auto;
}

/* A grid of small chips — one per detected field — rather than a stacked list, so the receipt reads
   at a glance the way the reference layout's "detected details" panel does, instead of as prose to
   read line by line. */
.applied__list[b-7v0cwz2gvi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
}

.applied__item[b-7v0cwz2gvi] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.applied__field[b-7v0cwz2gvi] {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.applied__field[b-7v0cwz2gvi]::after {
    content: ":";
}

.applied__value[b-7v0cwz2gvi] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.applied__value--none[b-7v0cwz2gvi] {
    color: var(--bs-secondary-color);
    font-style: italic;
    font-weight: 400;
}

.applied__item--more[b-7v0cwz2gvi] {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* A plain <button>, not an <a> — the values it reveals already live right above it in the same list,
   there is nowhere to navigate to. Reset to look like the same small secondary-text toggle every other
   "show more" affordance in the dialog uses (e.g. .conversation-runner__manual-toggle). */
.applied__toggle[b-7v0cwz2gvi] {
    all: unset;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: inherit;
    text-decoration: underline;
}

.applied__toggle:hover[b-7v0cwz2gvi],
.applied__toggle:focus-visible[b-7v0cwz2gvi] {
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .applied__head[b-7v0cwz2gvi] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* Basis 0: the title never claims a width of its own when the line breaks, so it always stays
       beside the tick and takes whatever is left (its text wraps inside it); only the undo button,
       sized to its content, moves to the next line when there's no room. */
    .applied__title[b-7v0cwz2gvi] {
        flex: 1 1 0;
    }
}
/* /Components/Interaction/Dialog/DialogCardGrid.razor.rz.scp.css */
/* A section is the direct-entry view, so its complete authored field list uses a deliberate three-column
   grid on wide screens. It drops columns as the available space narrows rather than making card controls
   too small to use. */
.card-grid[b-66ml82ss6b] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .card-grid[b-66ml82ss6b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .card-grid[b-66ml82ss6b] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.card-grid__empty[b-66ml82ss6b] {
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.65rem;
    color: var(--bs-secondary-color);
    text-align: center;
}
/* /Components/Interaction/Dialog/DialogChatTranscript.razor.rz.scp.css */
/* A familiar back-and-forth, not a dashboard: citizen bubbles align right, the assistant's align left.
   Not scrollable on its own any more — ConversationRunner's own scroll wrapper is the single scroll
   region for cards and this transcript together, so the composer below it can sit at a fixed bottom
   regardless of how long either grows. */

.chat-transcript[b-grrlsket82] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.35rem 0.5rem;
}

.chat-bubble[b-grrlsket82] {
    max-width: 80%;
    padding: 0.7rem 1rem;
    border-radius: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.chat-bubble--citizen[b-grrlsket82] {
    align-self: flex-end;
    border-bottom-right-radius: 0.35rem;
    background: var(--bs-primary);
    color: #fff;
}

/* A faint primary tint rather than a flat neutral gray — the same "this is the AI" language the
   composer's own "KI-gestützt" disclaimer and the sidebar's assistant-help hint already use elsewhere
   in Dialog-Mode (both via IconName.Stars), so an assistant bubble reads as AI-authored rather than as
   an inert UI box. */
.chat-bubble--assistant[b-grrlsket82] {
    align-self: flex-start;
    border-bottom-left-radius: 0.35rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-body-color);
}

/* Every assistant bubble except the rich receipt (chat-bubble--rich already carries its own components'
   styling — DialogAnswerSummary's green card, DialogContextHelp's blue callout — and stays unpadded and
   transparent, see below) gets a small leading avatar icon beside its text/content. */
.chat-bubble--assistant:not(.chat-bubble--rich)[b-grrlsket82] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Exactly one line of the bubble's text tall, so with no offset it sits on the first line — and a
   one-line bubble keeps the same space above and below its text. A top margin here made the icon the
   row's tallest item and pushed the text up by that much. */
[b-grrlsket82] .chat-bubble__avatar {
    flex: 0 0 auto;
    color: var(--bs-primary);
}

/* The live question opens with a smaller kicker line, which the icon lines up with as it always has. */
.chat-bubble--live[b-grrlsket82]  .chat-bubble__avatar {
    margin-top: 0.15rem;
}

.chat-bubble__content[b-grrlsket82] {
    min-width: 0;
}

/* Wraps an existing rich component (DialogAnswerSummary's undo receipt, DialogContextHelp's reply
   callout) instead of restyling it — the bubble shape comes from the component's own card styling, so
   this wrapper stays unpadded and transparent rather than nesting one rounded box inside another. */
.chat-bubble--rich[b-grrlsket82] {
    max-width: 92%;
    padding: 0;
    background: none;
}

[b-grrlsket82] .chat-bubble--rich .applied,
[b-grrlsket82] .chat-bubble--rich .context-help {
    border-radius: 1.1rem;
    border-bottom-left-radius: 0.35rem;
}

.chat-bubble--live[b-grrlsket82] {
    /* Wider than an ordinary bubble: unlike a citizen's or assistant's sentence, this one can carry a
       row of tappable option chips (see DialogQuickOptions), which need real room to read comfortably
       rather than wrap awkwardly inside an 80%-wide speech bubble. */
    max-width: 92%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.chat-bubble--live[b-grrlsket82]  .quick {
    margin-top: 0.6rem;
}

.chat-bubble__kicker[b-grrlsket82] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.78125rem;
    font-weight: 600;
}

/* Holds the headline and its optional HelpText toggle side by side — see DialogHelpToggle, the same
   small "i" button a field card's own body and a section header already use, reused here instead of
   printing the field's HelpText straight into the bubble unprompted. Wraps rather than clips: opening
   the toggle's alert drops it onto its own full-width line below both. */
.chat-bubble__intro[b-grrlsket82] {
    margin-bottom: 0.75rem;
}

.chat-bubble__intro[b-grrlsket82]  > *:last-child {
    margin-bottom: 0;
}

.chat-bubble__headline-row[b-grrlsket82] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chat-bubble__headline[b-grrlsket82] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.chat-bubble__hint[b-grrlsket82] {
    margin: 0.4rem 0 0;
    color: var(--bs-secondary-color);
}

/* The opener's topics: small cards the eye can scan — a section's name, then what it asks. Never
   buttons, so nothing about them suggests a tap is needed. */
.chat-bubble__topics-lead[b-grrlsket82] {
    margin: 0.6rem 0 0.4rem;
}

.chat-bubble__topics[b-grrlsket82] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-bubble__topic[b-grrlsket82] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

/* A long German compound breaks at a syllable, with a hyphen ("Sozialversicherungs-nummer"), not at
   whatever letter reaches the edge; overflow-wrap is the fallback for a word the browser cannot
   hyphenate. Long words only: "Postleitzahl" moves to the next line whole. Relies on the page's lang
   attribute. */
.chat-bubble__topic-title[b-grrlsket82] {
    font-weight: 600;
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
}

.chat-bubble__topic-detail[b-grrlsket82] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
}

.chat-bubble__topics-more[b-grrlsket82] {
    margin: 0.4rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.chat-bubble__action[b-grrlsket82] {
    margin-top: 0.25rem;
}

[b-grrlsket82] .chat-bubble__action .btn-link {
    padding-left: 0;
    padding-right: 0;
}

[b-grrlsket82] .chat-bubble__headline-row .help-info-btn {
    flex: 0 0 auto;
    /* Optical alignment with the headline's own cap height rather than its line box top. */
    margin-top: 0.2rem;
}

[b-grrlsket82] .chat-bubble__headline-row .help-info-alert {
    flex-basis: 100%;
}

/* Three dots bouncing in sequence — the wait behind chat-bubble__typing-dots is a real LLM round
   trip, so this stands in for the assistant's own reply until it lands, the same "someone is there"
   signal every chat product uses. */
.chat-bubble__typing-dots[b-grrlsket82] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0;
}

.chat-bubble__typing-dots span[b-grrlsket82] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--bs-primary);
    opacity: 0.5;
    animation: chat-bubble-typing-dot-b-grrlsket82 1.2s ease-in-out infinite;
}

.chat-bubble__typing-dots span:nth-child(2)[b-grrlsket82] {
    animation-delay: 0.15s;
}

.chat-bubble__typing-dots span:nth-child(3)[b-grrlsket82] {
    animation-delay: 0.3s;
}

@keyframes chat-bubble-typing-dot-b-grrlsket82 {
    0%, 60%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-0.15rem);
    }
}

/* The step under way, beside the dots: a line of text that changes as the turn moves on. Laid out
   like every other assistant bubble — avatar and dots on the first line of text, the bubble's padding
   the same above and below it. */
.chat-bubble__progress[b-grrlsket82] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

/* As tall as one line of the text beside it, the dots centred in it — so they sit on the middle of
   the step's first line whatever the font size, rather than on its baseline. */
.chat-bubble__progress .chat-bubble__typing-dots[b-grrlsket82] {
    flex: 0 0 auto;
    height: 1.45em;
    padding: 0;
}

.chat-bubble__progress-step[b-grrlsket82] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--bs-secondary-color);
    animation: chat-bubble-progress-in-b-grrlsket82 0.25s ease-out both;
}

/* Only after a step has run unusually long — shown by its own delayed animation, so it needs no
   timer, and restarts with every new step because each step's line is rendered anew. Takes no room
   until then: an invisible line held its space under the step and pushed the text off centre. */
.chat-bubble__progress-step .chat-bubble__progress-slow[b-grrlsket82] {
    font-size: 0.85rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    animation: chat-bubble-progress-slow-b-grrlsket82 0.4s ease-out 12s both;
}

@keyframes chat-bubble-progress-slow-b-grrlsket82 {
    from {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
    }

    to {
        max-height: 4rem;
        margin-top: 0.15rem;
        opacity: 1;
    }
}

@keyframes chat-bubble-progress-in-b-grrlsket82 {
    from {
        opacity: 0;
        transform: translateY(0.15rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-bubble__typing-dots span[b-grrlsket82] {
        animation: none;
    }

    .chat-bubble__progress-step[b-grrlsket82] {
        animation: none;
    }

    /* Still shown after the wait — only without the movement. */
    .chat-bubble__progress-step .chat-bubble__progress-slow[b-grrlsket82] {
        animation: chat-bubble-progress-slow-b-grrlsket82 0s linear 12s both;
    }
}

@media (max-width: 575.98px) {
    .chat-bubble[b-grrlsket82],
    .chat-bubble--rich[b-grrlsket82] {
        max-width: 92%;
    }
}

/* "Alle Pflichtangaben sind vollständig" inside the live bubble — success-tinted, the review button
   at the end of the line on a wide screen, below the text on a narrow one. */
.chat-bubble__ready[b-grrlsket82] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

[b-grrlsket82] .chat-bubble__ready-icon {
    flex: 0 0 auto;
}

.chat-bubble__ready-text[b-grrlsket82] {
    flex: 1 1 14rem;
}

/* Nothing left to ask: the note follows "Ihr Antrag ist bereit zum Absenden." instead of leading. */
.chat-bubble__headline-row + .chat-bubble__ready[b-grrlsket82] {
    margin: 0.6rem 0 0;
}
/* /Components/Interaction/Dialog/DialogContextHelp.razor.rz.scp.css */
/* An aside, not an alert: nothing has gone wrong, so it carries neither a status colour nor a
   border heavy enough to pull the eye off the question above it. */

.context-help[b-wz9it0ixdc] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 0.9rem;
}

/* ::deep, because the class is handed to <Icon> and a child component's markup never carries this
   component's isolation attribute. */
[b-wz9it0ixdc] .context-help__icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--bs-primary);
}

.context-help__body[b-wz9it0ixdc] {
    flex: 1 1 auto;
    min-width: 0;
}

.context-help__title[b-wz9it0ixdc] {
    margin: 0 0 0.2rem;
    font-weight: 600;
}

.context-help__text[b-wz9it0ixdc] {
    margin: 0;
    color: var(--bs-secondary-color);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Authored help is Markdown, so it can legitimately contain paragraphs and lists. The last one must
   not add trailing space inside the callout. */
.context-help__text[b-wz9it0ixdc]  > *:last-child {
    margin-bottom: 0;
}

/* An answer the citizen asked for is the main thing on screen at that moment, not an aside: the
   same size as the chat around it and in the body colour. Measured as "always a little small". */
.context-help--reply[b-wz9it0ixdc] {
    font-size: 1rem;
}

.context-help--reply .context-help__text[b-wz9it0ixdc] {
    color: var(--bs-body-color);
    line-height: 1.55;
}

.context-help--reply .context-help__text[b-wz9it0ixdc]  p {
    margin-bottom: 0.5rem;
}

.context-help__close[b-wz9it0ixdc] {
    flex: 0 0 auto;
    padding: 0.35rem;
}
/* /Components/Interaction/Dialog/DialogFieldCard.razor.rz.scp.css */
/* Restrained on purpose: a card states what it is and what state it is in, and nothing about it should
   need to be interpreted. Every status is a coloured pill carrying its own icon — never colour alone. */

.field-card[b-cs0334hyjg] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

/* The whole tile reacts to hover, not just its clickable header — a card with an open body is still
   one card, so pointing anywhere over it (header or the expanded field below) reads as one surface.
   Excluded for a static header (nothing happens on click) via :has(), the same condition that used to
   gate the rule when it lived on the header button alone. */
.field-card:not(:has(.field-card__head--static)):hover[b-cs0334hyjg] {
    background: var(--bs-tertiary-bg);
}

.field-card--review[b-cs0334hyjg] {
    border-color: var(--bs-warning-border-subtle, var(--bs-border-color));
}

.field-card--expanded[b-cs0334hyjg] {
    border-color: var(--bs-primary);
}

/* The visible pay-off for a free-text turn that reached this field without the citizen ever opening
   it — a brief highlight rather than a silent jump from open to done. */
.field-card--applied[b-cs0334hyjg] {
    animation: field-card-applied-b-cs0334hyjg 0.6s ease;
}

@keyframes field-card-applied-b-cs0334hyjg {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.45);
    }

    45% {
        box-shadow: 0 0 0 0.4rem rgba(var(--bs-success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-card--applied[b-cs0334hyjg] {
        animation: none;
    }
}

.field-card__head[b-cs0334hyjg] {
    display: flex;
    /* Top-aligned, not centred: the title row then sits at the same fixed offset from the top of
       every card whether or not it is followed by a preview line, so the status pill lines up across
       a whole row of cards instead of drifting up or down with how much text is below it. */
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    /* Tall enough for the title's own line plus the status pill wrapping to a second one (see
       .field-card__title-row) — back in a three-across row, a card is narrower than the pill and a
       full authored question reliably want at once, so the pill is allowed to drop below the title
       instead of squeezing it down to a couple of characters. */
    height: 6.75rem;
    padding: 1.1rem 1rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    overflow: hidden;
}

/* One extra line for the section it belongs to (see .field-card__section) — only ever added on the
   Overview, and added there uniformly, so every card in that grid is still the same height as every
   other, just a touch taller than a section's own listing (which never carries this line at all). */
.field-card--with-section .field-card__head[b-cs0334hyjg] {
    height: 7.5rem;
}

/* An open card is no longer a fixed-size tile in the grid — it is the one place the field is actually
   being answered, so its title is read in full rather than clipped, and the header grows to fit it. */
.field-card--expanded .field-card__head[b-cs0334hyjg] {
    height: auto;
    min-height: 5.5rem;
    overflow: visible;
}

.field-card--expanded .field-card__title[b-cs0334hyjg] {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
}

.field-card--expanded .field-card__title-row[b-cs0334hyjg] {
    flex-wrap: wrap;
}

.field-card__head:disabled[b-cs0334hyjg] {
    cursor: default;
}

.field-card__head:focus-visible[b-cs0334hyjg] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: 0.5rem;
}

/* The icon's own soft-tinted square, matching the reference design — a consistent, single accent
   rather than a colour invented per field, since the field type carries no real category of its own
   for the tint to mean anything more specific. */
.field-card__icon-badge[b-cs0334hyjg] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
}

[b-cs0334hyjg] .field-card__icon {
    color: var(--bs-primary);
    font-size: 1.25rem;
}

.field-card__headline[b-cs0334hyjg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.15rem;
    text-align: left;
}

/* The Overview's own disambiguator — which of several sections this field belongs to — set only
   there (see DialogCardItem.SectionTitle) and never on a section's own listing, where the page
   itself already says so. Small and muted on purpose: one more fact about the card, not a second
   title competing with the first. */
.field-card__section[b-cs0334hyjg] {
    display: block;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.78125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wraps on purpose: at a three-across card's own width, the title and the status pill no longer
   reliably fit side by side the way they did in a full-width single column, and forcing them onto one
   line left the title only two or three characters of room before the pill claimed the rest. Letting
   the pill drop to its own line gives the title the card's whole width instead. */
.field-card__title-row[b-cs0334hyjg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    min-width: 0;
}

/* Truncated, not wrapped — every card keeps the same fixed height no matter how long its title (the
   authored dialog question, or the field's own title when it has none) turns out to be. */
.field-card__title[b-cs0334hyjg] {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-card__preview[b-cs0334hyjg] {
    display: block;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The status pill itself (background/icon/label per tone) lives in DialogStatusPill.razor.css — its
   own component now, so the help modal can show the very same pill instead of a description of it. */

.field-card__lookup[b-cs0334hyjg] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

[b-cs0334hyjg] .field-card__chevron {
    flex: 0 0 auto;
    margin-top: 0.3rem;
    color: var(--bs-secondary-color);
}

.field-card__body[b-cs0334hyjg] {
    padding: 0.9rem 1.25rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: -1px;
}

.field-card__question[b-cs0334hyjg] {
    margin: 0 0 0.6rem;
    overflow-wrap: anywhere;
}

.field-card__error[b-cs0334hyjg] {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    background: var(--bs-danger-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-danger-text-emphasis, var(--bs-body-color));
    font-size: 0.88rem;
}

.field-card__options[b-cs0334hyjg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* DialogHelpToggle/FieldHelpAlert are the classic form-mode's own shared "i" button and green callout
   (global ".help-info-btn"/".help-info-alert" styling) — only the spacing below them is this card's own
   concern. */
.field-card__body[b-cs0334hyjg]  .help-info-btn,
.field-card__body[b-cs0334hyjg]  .help-info-alert {
    margin-bottom: 0.5rem;
}

.field-card__input[b-cs0334hyjg] {
    min-width: 0;
}

[b-cs0334hyjg] .field-card__input .form-control,
[b-cs0334hyjg] .field-card__input .form-select {
    border-radius: 0.5rem;
}

[b-cs0334hyjg] .field-card__auto {
    margin-top: 0.6rem;
}

.field-card__confirm[b-cs0334hyjg] {
    margin-top: 0.6rem;
}

.field-card__skip[b-cs0334hyjg] {
    margin-top: 0.5rem;
}

[b-cs0334hyjg] .field-card__skip .btn {
    padding-inline: 0;
    color: var(--bs-secondary-color);
}

[b-cs0334hyjg] .field-card__add {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .field-card__head[b-cs0334hyjg] {
        padding: 1rem;
    }

    .field-card__icon-badge[b-cs0334hyjg] {
        width: 2.4rem;
        height: 2.4rem;
    }
}
/* /Components/Interaction/Dialog/DialogInferenceSuggestion.razor.rz.scp.css */
.inference-suggestion__text[b-pq99agjrug] {
    margin: 0 0 0.65rem;
    font-size: 1.02rem;
}

.inference-suggestion__label[b-pq99agjrug] {
    color: var(--bs-secondary-color);
    font-size: 0.86rem;
}

.inference-suggestion__value[b-pq99agjrug] {
    display: block;
    font-weight: 600;
}

.inference-suggestion__actions[b-pq99agjrug] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inference-suggestion__all[b-pq99agjrug] {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.inference-suggestion__all-lead[b-pq99agjrug] {
    margin: 0 0 0.35rem;
    color: var(--bs-secondary-color);
    font-size: 0.86rem;
}

.inference-suggestion__all-list[b-pq99agjrug] {
    margin: 0 0 0.65rem;
    padding-left: 1.1rem;
}

.inference-suggestion__all-field[b-pq99agjrug] {
    color: var(--bs-secondary-color);
}

.inference-suggestion__all-value[b-pq99agjrug] {
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* /Components/Interaction/Dialog/DialogPrefillChoiceAnswers.razor.rz.scp.css */
.prefill-answers__hint[b-2x22mazvyj] {
    margin: 0 0 0.6rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.prefill-answers__list[b-2x22mazvyj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
    min-width: 0;
}

/* ChoiceButton's language (border, radius family, tint on selection, lift on hover), with room for an
   address: two lines and the record's origin. */
.prefill-answer[b-2x22mazvyj] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: start;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .prefill-answer:hover:not(:disabled)[b-2x22mazvyj] {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.05);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
    }

    .prefill-answer:focus-visible[b-2x22mazvyj] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.22), 0 3px 8px rgba(15, 23, 42, 0.1);
    }

    .prefill-answer:disabled[b-2x22mazvyj] {
        cursor: not-allowed;
        opacity: 0.6;
        transform: none;
        box-shadow: none;
    }

.prefill-answer--selected[b-2x22mazvyj] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.prefill-answer--manual[b-2x22mazvyj] {
    border-style: dashed;
}

.prefill-answer__check[b-2x22mazvyj] {
    flex-shrink: 0;
    color: var(--bs-primary);
    line-height: 1.35;
}

.prefill-answer__text[b-2x22mazvyj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.prefill-answer__title[b-2x22mazvyj] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.prefill-answer__subtitle[b-2x22mazvyj] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.prefill-answer__tag[b-2x22mazvyj] {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .prefill-answers__list[b-2x22mazvyj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Interaction/Dialog/DialogProgressSummary.razor.rz.scp.css */
/* Colour carries meaning here and nowhere else in this component: green is finished, amber wants
   attention, muted is merely offered. The theme's primary colour is deliberately absent — it belongs
   to things the citizen can act on, and none of this is clickable. */

.summary[b-z297ky2e3t] {
    min-width: 0;
}

/* A visible track even at 0% is the whole point of a progress bar — it says "there is something to
   fill", not just "here is how much is filled". This used to share --bs-tertiary-bg with the sidebar
   panel behind it, which is exactly why it read as empty space until the first field was answered:
   the track and its background were the same colour. --bs-secondary-bg is a step darker, so the track
   stays visible against the panel at any percentage, including zero. */
[b-z297ky2e3t] .summary__bar .progress {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
}

[b-z297ky2e3t] .summary__bar .progress-bar {
    border-radius: 999px;
    transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    [b-z297ky2e3t] .summary__bar .progress-bar {
        transition: none;
    }
}

.summary__statuses[b-z297ky2e3t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.85rem;
    /* Above the bar: the figures are read first, the bar illustrates them. */
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.summary__status[b-z297ky2e3t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

[b-z297ky2e3t] .summary__icon {
    flex: 0 0 auto;
    line-height: 1;
}

.summary__status--main[b-z297ky2e3t] {
    color: var(--bs-body-color);
    font-weight: 600;
}

.summary__status--done[b-z297ky2e3t] {
    color: var(--bs-success-text-emphasis, var(--bs-success));
}

/* A chip rather than plain text: this is the one status that asks the citizen to do something they
   would not otherwise know about, so it is the one allowed to stand out. */
.summary__status--review[b-z297ky2e3t] {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--bs-warning-border-subtle, var(--bs-border-color));
    border-radius: 0.35rem;
    background: var(--bs-warning-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-warning-text-emphasis, var(--bs-body-color));
    font-weight: 600;
}

.summary__status--optional[b-z297ky2e3t] {
    color: var(--bs-secondary-color);
}

/* The sidebar header is a narrow column, not a full-width bar — statuses stack on their own lines
   instead of wrapping mid-word, and everything shrinks a step to match the nav rows below it. */
.summary--compact .summary__statuses[b-z297ky2e3t] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.summary--compact .summary__status--review[b-z297ky2e3t] {
    padding: 0.05rem 0.4rem;
}
/* /Components/Interaction/Dialog/DialogQuickAnswers.razor.rz.scp.css */
.quick-answers__hint[b-rb1op5skrf] {
    margin: 0 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.quick[b-rb1op5skrf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.quick-answers__confirm[b-rb1op5skrf] {
    margin-top: 0.6rem;
}

/* These buttons are the answer, so they are sized as the primary target rather than as incidental
   chips. ::deep sits after the scoped selector because the size belongs to the child component's own
   root element, which never carries this component's isolation attribute. */
.quick[b-rb1op5skrf]  .choice-btn {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    /* One full-width target per line beats a wrapped row of half-width ones on a phone. */
    .quick[b-rb1op5skrf] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Interaction/Dialog/DialogSectionHeader.razor.rz.scp.css */
.section2[b-7df3satkyo] {
    margin-bottom: 0.9rem;
}

.section2__title[b-7df3satkyo] {
    margin: 0 0 0.3rem;
    font-size: 1.3rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Title and help button in one row; the help text, when opened, takes the full width below. */
.section2__heading[b-7df3satkyo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
}

.section2__title[b-7df3satkyo] {
    flex: 0 1 auto;
    min-width: 0;
}

.section2__heading[b-7df3satkyo]  .help-info-btn {
    flex: 0 0 auto;
    margin-bottom: 0.3rem;
}

.section2__heading[b-7df3satkyo]  .help-info-alert {
    flex: 0 0 100%;
}

.section2[b-7df3satkyo]  .help-info-alert {
    margin: 0.4rem 0 0.6rem;
}

.section2__intro[b-7df3satkyo] {
    margin-top: 0.5rem;
    color: var(--bs-secondary-color);
}

.section2__intro[b-7df3satkyo]  > *:last-child {
    margin-bottom: 0;
}

[b-7df3satkyo] .section2__remove {
    margin-top: 0.5rem;
    padding-inline: 0;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.section2__add[b-7df3satkyo] {
    margin-top: 0.5rem;
}

.section2__limit[b-7df3satkyo] {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}
/* /Components/Interaction/Dialog/DialogSidebar.razor.rz.scp.css */
/* The panel that separates "where you are" from "what you're answering" — a light, neutral tint
   rather than a colour invented for the purpose, and its own rounded corners on the desktop app-shell
   layout (see ConversationRunner.razor.css for how the shell itself is put together). */
.dialog-sidebar[b-44rf2mwyu2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
}

.dialog-sidebar__header[b-44rf2mwyu2] {
    flex: 0 0 auto;
    padding-bottom: 0.9rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.dialog-sidebar__title[b-44rf2mwyu2] {
    margin: 0 0 0.6rem;
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dialog-sidebar__list[b-44rf2mwyu2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.4rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    /* The one thing allowed to scroll on its own: a long list of sections must not carry the header,
       the card grid or the composer along with it. See ConversationRunner.razor.css, which gives the
       whole shell a fixed height so this actually has something to scroll within.

       scrollbar-gutter reserves the track's own space up front rather than letting an overlay-style
       scrollbar draw on top of the last few pixels of every row — without it, the thumb sat directly
       over each item's status text/border on a system that overlays rather than reflows for one. The
       small right padding gives the reserved track a hair of breathing room from the item border next
       to it, purely cosmetic on a system with no visible track at all. */
    .dialog-sidebar__list[b-44rf2mwyu2] {
        overflow-y: auto;
        scrollbar-gutter: stable;
        padding-right: 0.35rem;
    }
}

/* A page is an accordion group: quiet while closed, but clearly interactive through its count badge and
   chevron. The selected section still receives the familiar stronger card treatment inside the group. */
.dialog-sidebar__page[b-44rf2mwyu2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dialog-sidebar__page-toggle[b-44rf2mwyu2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--bs-secondary-color);
    text-align: left;
}

.dialog-sidebar__page-toggle:hover[b-44rf2mwyu2],
.dialog-sidebar__page-toggle--expanded[b-44rf2mwyu2] {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
}

.dialog-sidebar__page-toggle:focus-visible[b-44rf2mwyu2] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.dialog-sidebar__page-toggle-title[b-44rf2mwyu2] {
    overflow-wrap: anywhere;
    font-size: 0.84375rem;
    font-weight: 600;
}

.dialog-sidebar__page-toggle-count[b-44rf2mwyu2] {
    min-width: 1.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

[b-44rf2mwyu2] .dialog-sidebar__page-toggle-icon {
    font-size: 0.85rem;
    transition: transform 160ms ease;
}

.dialog-sidebar__page-toggle--expanded[b-44rf2mwyu2]  .dialog-sidebar__page-toggle-icon {
    color: var(--bs-primary);
}

.dialog-sidebar__page-items[b-44rf2mwyu2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0.15rem;
    padding: 0 0 0 0.55rem;
    border-left: 1px solid var(--bs-border-color);
    list-style: none;
}

.dialog-sidebar__page-items > li[b-44rf2mwyu2] {
    min-width: 0;
}

.dialog-sidebar__item[b-44rf2mwyu2] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    font-size: 0.92rem;
}

/* A quiet reading of the same state the status label already names in words — never the only signal,
   just a faster one to scan down a long list for. Kept light on purpose: "informing", not "alarming". */
.dialog-sidebar__item--tone-done[b-44rf2mwyu2] {
    background: var(--bs-success-bg-subtle, var(--bs-body-bg));
}

.dialog-sidebar__item--tone-review[b-44rf2mwyu2] {
    background: var(--bs-warning-bg-subtle, var(--bs-body-bg));
}

.dialog-sidebar__item--tone-missing[b-44rf2mwyu2] {
    background: var(--bs-danger-bg-subtle, var(--bs-body-bg));
}

.dialog-sidebar__item:hover[b-44rf2mwyu2] {
    border-color: var(--bs-secondary-color);
}

.dialog-sidebar__item:focus-visible[b-44rf2mwyu2] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* The current page, told apart by weight and colour alone — every row already has the same border as
   every other, so the active one does not also need a fill to read as selected; see the reference
   this was measured against, where "selected" is a font change on an otherwise identical row. */
.dialog-sidebar__item--active[b-44rf2mwyu2] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
}

/* The one row that is not a section of the form but the way back to all of them — bold by default,
   not only once selected, so it reads as structurally different from the plain section rows below it
   without needing a fill or a size change to say so. */
.dialog-sidebar__item--overview[b-44rf2mwyu2] {
    font-weight: 600;
}

[b-44rf2mwyu2] .dialog-sidebar__item--overview .dialog-sidebar__item-icon {
    color: var(--bs-primary);
}

[b-44rf2mwyu2] .dialog-sidebar__item-icon {
    flex: 0 0 auto;
}

.dialog-sidebar__item-title[b-44rf2mwyu2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dialog-sidebar__item-status[b-44rf2mwyu2] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dialog-sidebar__item-status--done[b-44rf2mwyu2] {
    color: var(--bs-success-text-emphasis, var(--bs-success));
    font-weight: 600;
}

.dialog-sidebar__item-status--review[b-44rf2mwyu2] {
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
    font-weight: 600;
}

.dialog-sidebar__item-status--missing[b-44rf2mwyu2] {
    color: var(--bs-secondary-color);
}

.dialog-sidebar__item--active .dialog-sidebar__item-status--missing[b-44rf2mwyu2] {
    color: var(--bs-primary);
}

.dialog-sidebar__item-status--optional[b-44rf2mwyu2],
.dialog-sidebar__item-status--muted[b-44rf2mwyu2] {
    color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
    /* A collapsed accordion is more useful than a long horizontal strip on touch devices: page names
       remain easy to scan, and an opened page gives its section cards enough width to be readable. */
    .dialog-sidebar[b-44rf2mwyu2] {
        height: auto;
        padding: 1rem;
        border-radius: 0.75rem;
    }

    .dialog-sidebar__list[b-44rf2mwyu2] {
        flex-direction: column;
        overflow: visible;
        padding-bottom: 0;
    }

    .dialog-sidebar__page-items[b-44rf2mwyu2] {
        padding-left: 0.45rem;
    }
}
/* /Components/Interaction/Dialog/DialogStatusPill.razor.rz.scp.css */
/* A pill, not plain coloured text: background, icon and label together are what carries the state, so
   it never depends on colour perception alone. */
.status-pill[b-oucl5jt1sw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

[b-oucl5jt1sw] .status-pill__icon {
    line-height: 1;
}

.status-pill--done[b-oucl5jt1sw] {
    background: var(--bs-success-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-success-text-emphasis, var(--bs-success));
}

.status-pill--review[b-oucl5jt1sw] {
    background: var(--bs-warning-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.status-pill--missing[b-oucl5jt1sw] {
    background: var(--bs-danger-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

.status-pill--optional[b-oucl5jt1sw],
.status-pill--muted[b-oucl5jt1sw] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}
/* /Components/Interaction/FormLandingPage.razor.rz.scp.css */
/* Uses var(--bs-primary)/--bs-primary-rgb directly (not --municipality-color) so the accent
   follows municipality theming when rendered inside .form-wrapper, and still falls back
   sensibly to Bootstrap's default primary anywhere else — same mechanism FormRenderer.razor.css
   and ChoiceButton.razor.css already rely on. */

.form-landing-description[b-jo3zrz8qon] {
    font-size: 1.05rem;
}

/* ── Start button ─────────────────────────────────────────────────────────── */

.form-landing-start-btn[b-jo3zrz8qon] {
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.24);
}

@media (max-width: 575.98px) {
    .form-landing-start-btn[b-jo3zrz8qon] {
        width: 100%;
    }
}
/* /Components/Interaction/FormRenderer.razor.rz.scp.css */
/* ── Step indicator ─────────────────────────────────────────────────────────
   Bootstrap has no stepper/wizard component, so the dot shape, connector
   line, and per-state colours are the only things handled here.
   All layout (flex, spacing, gap) is done with Bootstrap utilities in markup.
   ────────────────────────────────────────────────────────────────────────── */

.form-stepper[b-g0qbfkceb9] {
    display: flex;
    align-items: center;
}

.form-stepper__step[b-g0qbfkceb9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    flex-shrink: 0;
}

.form-stepper__step.is-past[b-g0qbfkceb9] {
    cursor: pointer;
}

.form-stepper__step.is-past:hover .form-stepper__dot[b-g0qbfkceb9] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Circle dot — Bootstrap badge can't easily be sized/coloured this way */
.form-stepper__dot[b-g0qbfkceb9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    background: #fff;
    border: 2px solid var(--bs-light);
    color: var(--bs-secondary);
    transition: background 0.15s, border-color 0.15s;
}

.form-stepper__step.is-current .form-stepper__dot[b-g0qbfkceb9] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15);
}

.form-stepper__step.is-past .form-stepper__dot[b-g0qbfkceb9] {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

/* Label beneath dot */
.form-stepper__label[b-g0qbfkceb9] {
    font-size: 0.72rem;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-secondary);
    text-align: center;
}

.form-stepper__step.is-current .form-stepper__label[b-g0qbfkceb9] {
    color: var(--bs-primary);
    font-weight: 600;
}

.form-stepper__step.is-past .form-stepper__label[b-g0qbfkceb9] {
    color: var(--bs-success);
}

/* Horizontal connector between steps */
.form-stepper__connector[b-g0qbfkceb9] {
    flex: 1;
    height: 2px;
    background: var(--bs-light);
    margin: 0 4px;
    margin-bottom: 20px; /* visually aligns with dot centre */
    transition: background 0.15s;
}

.form-stepper__connector.is-past[b-g0qbfkceb9] {
    background: var(--bs-success);
}

/* A later page that may already be jumped to (visited, or everything before it complete). */
.form-stepper__step.is-reachable[b-g0qbfkceb9] {
    cursor: pointer;
}

.form-stepper__step.is-reachable .form-stepper__dot[b-g0qbfkceb9] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.form-stepper__step.is-reachable:hover .form-stepper__dot[b-g0qbfkceb9] {
    background: var(--bs-primary);
    color: #fff;
}

/* ── Vertical stepper (form page's drawer / left column) ────────────────────
   Dot and page name side by side, the connector a line down from dot to dot.
   ────────────────────────────────────────────────────────────────────────── */

.form-stepper--vertical[b-g0qbfkceb9] {
    display: block;
}

.form-stepper__list[b-g0qbfkceb9] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-stepper__item[b-g0qbfkceb9] {
    position: relative;
    padding-bottom: 1rem;
}

.form-stepper__item:last-child[b-g0qbfkceb9] {
    padding-bottom: 0;
}

/* The connector: from below this dot down to the next one. */
.form-stepper__item:not(:last-child)[b-g0qbfkceb9]::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 4px;
    left: 15px;
    width: 2px;
    background: var(--bs-border-color);
}

.form-stepper__item.is-past[b-g0qbfkceb9]::before {
    background: var(--bs-success);
}

.form-stepper--vertical .form-stepper__step[b-g0qbfkceb9] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
}

.form-stepper--vertical .form-stepper__label[b-g0qbfkceb9] {
    max-width: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--bs-body-color);
    font-size: 0.92rem;
    text-align: left;
}

.form-stepper--vertical .form-stepper__step:disabled .form-stepper__label[b-g0qbfkceb9] {
    color: var(--bs-secondary-color);
}

.form-stepper--vertical .form-stepper__step.is-reachable:hover .form-stepper__label[b-g0qbfkceb9],
.form-stepper--vertical .form-stepper__step.is-past:hover .form-stepper__label[b-g0qbfkceb9] {
    text-decoration: underline;
}

/* ── Page title accent bar ───────────────────────────────────────────────────
   Bootstrap border utilities only do 1px borders on all/one side; this is a
   short, thick, coloured underline accent — custom CSS is the right tool.
   ────────────────────────────────────────────────────────────────────────── */

.form-page-divider[b-g0qbfkceb9] {
    height: 3px;
    width: 48px;
    background: var(--bs-primary);
    border-radius: 2px;
}

/* ── Highlighted field (jump-to from review) ────────────────────────────────
   Bootstrap has no left-border accent utility with a tinted background.
   ────────────────────────────────────────────────────────────────────────── */

.form-field--highlighted[b-g0qbfkceb9] {
    border-left: 3px solid var(--bs-primary);
    padding: 6px 8px 6px 12px;
    border-radius: 4px;
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* ── Repeatable-block "add" button ───────────────────────────────────────────
   Bootstrap compiles .btn-outline-primary with a literal theme colour rather
   than var(--bs-primary), so it ignores the municipality theming that the
   parent .form-wrapper applies via --bs-primary. Re-point it at --bs-primary
   here (the same mechanism .btn-primary and the dialog's buttons use) so the
   add button matches the municipality colour of the other action buttons.
   --bs-primary is always defined (Bootstrap root sets it; .form-wrapper
   overrides it), so this stays correct in the builder preview too. */
.btn-outline-primary[b-g0qbfkceb9] {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
/* /Components/Interaction/HomeCard.razor.rz.scp.css */
/* Hover marks the card with the manual's active edge (brand-200, Kap. 4.3) instead of lifting it:
   a shadow means "lies above something" (Kap. 6.4), and motion only where it explains a change
   (Kap. 6.5). The whole card is the link, so the focus ring goes around the card. */
[b-ynok2g5ry2] .home-card {
    color: inherit;
    transition: border-color var(--k-d-schnell) var(--k-kurve), background-color var(--k-d-schnell) var(--k-kurve);
}

    .home-card-link:hover[b-ynok2g5ry2]  .home-card {
        border-color: var(--k-brand-200) !important;
        background-color: var(--k-brand-50);
    }

.home-card-link[b-ynok2g5ry2] {
    border-radius: var(--bs-border-radius-lg);
}

    .home-card-link:focus-visible[b-ynok2g5ry2] {
        outline: none;
        box-shadow: var(--k-fokus);
    }

.home-card-icon[b-ynok2g5ry2] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
/* /Components/Interaction/ImportantFieldsChecklist.razor.rz.scp.css */
/* Uses var(--bs-primary)/--bs-primary-rgb directly (not --municipality-color) so the accent
   follows municipality theming when rendered inside .form-wrapper, and still falls back
   sensibly to Bootstrap's default primary anywhere else — same mechanism FormRenderer.razor.css
   and ChoiceButton.razor.css already rely on. */

/* ── Checklist card ───────────────────────────────────────────────────────── */

.form-landing-checklist[b-ixp93ed83p] {
    border-radius: 1rem;
}

.form-landing-checklist-icon[b-ixp93ed83p] {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
}

.form-landing-page + .form-landing-page[b-ixp93ed83p] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--color-border, #dee2e6);
}

.form-landing-page-title[b-ixp93ed83p] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-primary);
    margin-bottom: 0.85rem;
}

/* ── Blocks ───────────────────────────────────────────────────────────────── */

.form-landing-block[b-ixp93ed83p] {
    background: var(--color-bg-light, #f8f9fa);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
}

.form-landing-block + .form-landing-block[b-ixp93ed83p] {
    margin-top: 0.75rem;
}

.form-landing-page > .form-landing-block:first-child[b-ixp93ed83p],
.form-landing-page > .form-landing-indent:first-child[b-ixp93ed83p] {
    margin-top: 0;
}

.form-landing-block-header[b-ixp93ed83p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.form-landing-block-icon[b-ixp93ed83p] {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.form-landing-badge[b-ixp93ed83p] {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--color-text-muted, #6c757d) !important;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

.form-landing-fields[b-ixp93ed83p] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-landing-field-row[b-ixp93ed83p] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-landing-field-row > i[b-ixp93ed83p] {
    color: var(--bs-success, #198754);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* ── Conditional call-outs ────────────────────────────────────────────────── */

.form-landing-condition[b-ixp93ed83p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

.form-landing-condition i[b-ixp93ed83p] {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.form-landing-indent[b-ixp93ed83p] {
    border-left: 2px solid rgba(var(--bs-primary-rgb), 0.35);
    padding-left: 0.9rem;
    margin-left: 0.25rem;
}

.form-landing-hide-note[b-ixp93ed83p] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-text-muted, #6c757d);
    margin-top: 0.35rem;
}

.form-landing-hide-note i[b-ixp93ed83p] {
    flex-shrink: 0;
}
/* /Components/Interaction/MunicipalityEntryPage.razor.rz.scp.css */
/* Same visual language as the former landing page (FormLandingPage.razor.css) and the shared
   ImportantFieldsChecklist: borderless, softly rounded cards on the page background. */

.form-landing-description[b-ikdcezftbd] {
    font-size: 1.05rem;
}

.entry-page-card[b-ikdcezftbd] {
    border-radius: 1rem;
}

.entry-page-form-title[b-ikdcezftbd] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0;
}
/* /Components/Interaction/Rendering/PrefillChoicePicker.razor.rz.scp.css */
.prefill-choice[b-6vtnlpqsj4] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: var(--bs-body-bg);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

/* Still open: draw the eye, the fields below wait for it. */
.prefill-choice--pending[b-6vtnlpqsj4] {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.prefill-choice--invalid[b-6vtnlpqsj4] {
    border-color: var(--bs-danger);
}

.prefill-choice__head[b-6vtnlpqsj4] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.prefill-choice__icon[b-6vtnlpqsj4] {
    color: var(--bs-primary);
    font-size: 1.15rem;
    line-height: 1.4;
}

.prefill-choice__heading[b-6vtnlpqsj4] {
    flex: 1 1 auto;
    min-width: 0;
}

.prefill-choice__prompt[b-6vtnlpqsj4] {
    font-weight: 600;
}

.prefill-choice__hint[b-6vtnlpqsj4] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.prefill-choice__badge[b-6vtnlpqsj4] {
    flex-shrink: 0;
}

.prefill-choice__options[b-6vtnlpqsj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
}

.prefill-option[b-6vtnlpqsj4] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.prefill-option:hover[b-6vtnlpqsj4] {
    border-color: var(--bs-primary);
}

.prefill-option:focus-within[b-6vtnlpqsj4] {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.5);
    outline-offset: 1px;
}

.prefill-option--selected[b-6vtnlpqsj4] {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.prefill-option--manual[b-6vtnlpqsj4] {
    border-style: dashed;
}

.prefill-option__radio[b-6vtnlpqsj4] {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.prefill-option__text[b-6vtnlpqsj4] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.prefill-option__title[b-6vtnlpqsj4] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.prefill-option__subtitle[b-6vtnlpqsj4] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.prefill-option__tag[b-6vtnlpqsj4] {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.prefill-choice__status[b-6vtnlpqsj4] {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .prefill-choice[b-6vtnlpqsj4] {
        padding: 0.75rem;
    }

    .prefill-choice__options[b-6vtnlpqsj4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The footer at the bottom of the window even on a short page, below the content on a long one. */
.main-layout[b-x0rtsnffry] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-layout__content[b-x0rtsnffry] {
    flex: 1 0 auto;
}

.main-layout__footer[b-x0rtsnffry] {
    margin-top: 2rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Kopfzeile (manual Kap. 7.1/6.4): light and opaque, 56 px, separated from the content by its 1 px
   line (the border-bottom utility in the markup) instead of a shadow — no glass look (Kap. 2.2). */
.app-navbar[b-q296535dmb] {
    background-color: var(--navbar-bg);
    z-index: 1030;
    min-height: 56px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* The logo carries its own colours; the link around it gets the k360 focus ring from site.scss's
   plain-link rule. */
[b-q296535dmb] .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: var(--bs-border-radius);
}

[b-q296535dmb] .nav-link {
    color: var(--nav-link-color);
    font-weight: 500;
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.85rem;
    transition: color var(--k-d-schnell) var(--k-kurve), background-color var(--k-d-schnell) var(--k-kurve);
}

    [b-q296535dmb] .nav-link:hover,
    [b-q296535dmb] .nav-link:focus {
        color: var(--bs-primary);
        background-color: var(--bs-primary-hover-bg);
    }

    [b-q296535dmb] .nav-link.active {
        color: var(--bs-primary) !important;
        background-color: var(--bs-primary-active-bg);
    }

@media (max-width: 767.98px) {
    [b-q296535dmb] .navbar-nav {
        padding-top: 0.5rem;
        gap: 0.25rem;
    }
}

[b-q296535dmb] .dropdown-toggle::after {
    display: none;
}

/* The profile trigger sits at the far right of the header. Bootstrap otherwise anchors a dropdown's
   left edge to the trigger, which lets this menu run past a narrow viewport before Popper's next
   measurement. Anchor its right edge instead; the viewport-relative cap is CSS-driven, so it is
   immediately correct throughout a live window resize rather than waiting for a JavaScript update. */
[b-q296535dmb] .user-dropdown-menu {
    max-width: calc(100vw - 1rem);
}

[b-q296535dmb] .user-dropdown-menu .fw-bold {
    overflow-wrap: anywhere;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-b0ci4hbcng],
.components-reconnect-repeated-attempt-visible[b-b0ci4hbcng],
.components-reconnect-failed-visible[b-b0ci4hbcng],
.components-pause-visible[b-b0ci4hbcng],
.components-resume-failed-visible[b-b0ci4hbcng],
.components-rejoining-animation[b-b0ci4hbcng] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-retrying[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-failed[b-b0ci4hbcng],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-b0ci4hbcng] {
    display: block;
}


/* A dialog in the k360 look (manual Kap. 6.3/6.4/6.5): 12 px radius, the level-2 shadow, 180 ms
   transitions on the manual's curve — no overshoot. */
#components-reconnect-modal[b-b0ci4hbcng] {
    background-color: #fff;
    color: var(--bs-body-color);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--k-sch-2);
    opacity: 0;
    transition: display 0.18s allow-discrete, overlay 0.18s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-b0ci4hbcng 0.18s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-b0ci4hbcng 0.18s var(--k-kurve) 0.3s, components-reconnect-modal-fadeInOpacity-b-b0ci4hbcng 0.18s var(--k-kurve) 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-b0ci4hbcng]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-b0ci4hbcng 0.18s var(--k-kurve);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    /* The entrance is decoration, not a wait indicator. */
    #components-reconnect-modal[b-b0ci4hbcng],
    #components-reconnect-modal[open][b-b0ci4hbcng],
    #components-reconnect-modal[b-b0ci4hbcng]::backdrop {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
    }
}

@keyframes components-reconnect-modal-slideUp-b-b0ci4hbcng {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-b0ci4hbcng {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-b0ci4hbcng {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-b0ci4hbcng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-b0ci4hbcng] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-b0ci4hbcng] {
    border: 0;
    background-color: var(--color-reconnect-btn);
    color: var(--color-bg-white);
    font: inherit;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 7px;
}

    #components-reconnect-modal button:hover[b-b0ci4hbcng] {
        background-color: var(--color-reconnect-btn-hover);
    }

    #components-reconnect-modal button:active[b-b0ci4hbcng] {
        background-color: #082344;
    }

    #components-reconnect-modal button:focus-visible[b-b0ci4hbcng] {
        outline: none;
        box-shadow: var(--k-fokus);
    }

.components-rejoining-animation[b-b0ci4hbcng] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-b0ci4hbcng] {
        position: absolute;
        border: 3px solid var(--k-brand-600);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-b0ci4hbcng 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-b0ci4hbcng] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-b0ci4hbcng {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Form.razor.rz.scp.css */
.form-wrapper[b-u0x91b7vmj] {
    min-width: 0;

    /* Bootstrap's own shade/tint percentages for hover/active states // (15% / 20% darker — matches Bootstrap's $btn-hover-bg-shade-amount / $btn-active-bg-shade-amount) */
    --municipality-color-hover: color-mix(in srgb, var(--municipality-color) 85%, black);
    --municipality-color-active: color-mix(in srgb, var(--municipality-color) 80%, black);
    --municipality-color-light: color-mix(in srgb, var(--municipality-color) 15%, white);
    /* Core theme color + its rgb() variant (Bootstrap uses this for rgba() opacity tricks, e.g. focus
       rings and every tinted badge in the dialog). --municipality-color-rgb is an actual "r, g, b"
       triplet computed server-side (see Form.razor's MunicipalityColorStyles) — plugging the hex
       string itself in here would make every rgba(var(--bs-primary-rgb), …) call invalid CSS, and
       the tint would silently vanish rather than error. Falls back to the app's own primary (k360
       Arbeitsblau, site.scss --primary-rgb) when there is no municipality colour to parse — the same
       colour Form.razor's "var(--primary)" fallback puts into --municipality-color. */
    --bs-primary: var(--municipality-color);
    --bs-primary-rgb: var(--municipality-color-rgb, var(--primary-rgb));
    /* Buttons */
    ::deep .btn-primary {
        --bs-btn-bg: var(--municipality-color);
        --bs-btn-border-color: var(--municipality-color);
        --bs-btn-hover-bg: var(--municipality-color-hover);
        --bs-btn-hover-border-color: var(--municipality-color-hover);
        --bs-btn-active-bg: var(--municipality-color-active);
        --bs-btn-active-border-color: var(--municipality-color-active);
        /* Disabled stays the neutral k360 surface + text (site.scss), not a faded municipality colour. */
    }
    /* Outline buttons */
    [b-u0x91b7vmj] .btn-outline-primary {
        --bs-btn-color: var(--municipality-color);
        --bs-btn-border-color: var(--municipality-color);
        --bs-btn-hover-bg: var(--municipality-color);
        --bs-btn-hover-border-color: var(--municipality-color);
        /* Pressed a shade darker, as .btn-outline-secondary (app.css .form-wrapper). */
        --bs-btn-active-bg: var(--municipality-color-active);
        --bs-btn-active-border-color: var(--municipality-color-active);
    }
    /* Links */
    [b-u0x91b7vmj] .link-primary, [b-u0x91b7vmj] a {
        --bs-link-color: var(--municipality-color);
        --bs-link-hover-color: var(--municipality-color-hover);
    }
    /* Progress bars (file uploads): Bootstrap compiles theirs to the k360 blue, not var(--bs-primary). */
    [b-u0x91b7vmj] .progress {
        --bs-progress-bar-bg: var(--municipality-color);
    }
    /*Subtle backgrounds / text-emphasis utilities (bg-primary-subtle, text-primary-emphasis, etc.) */
    --bs-primary-bg-subtle: var(--municipality-color-light);
    --bs-primary-border-subtle: var(--municipality-color);
    --bs-primary-text-emphasis: var(--municipality-color-active);[b-u0x91b7vmj]

    /* Form controls (focus ring, checked checkboxes/radios, range sliders) */
     .form-check-input:checked {
        background-color: var(--municipality-color);
        border-color: var(--municipality-color);
    }

    /* The k360 focus ring (2 px surface + 2 px colour, site.scss) in the municipality's colour, so
       the citizen form shows one ring everywhere — never the k360 blue on a municipality's page. */
    [b-u0x91b7vmj] .btn {
        --bs-btn-focus-box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--municipality-color);
    }

    [b-u0x91b7vmj] .form-control:focus,
    [b-u0x91b7vmj] .form-select:focus,
    [b-u0x91b7vmj] .form-check-input:focus {
        border-color: var(--municipality-color);
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--municipality-color);
    }
}

/* ── Header ──────────────────────────────────────────────────────────────────────────────────
   One slim bar for both modes, so a phone shows the form rather than its frame: the menu button
   (below 992px, while filling), the municipality's logo and name, and the info button. */
.municipality-header[b-u0x91b7vmj] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 2.75rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Coats of arms come in every size and aspect ratio; the bar's height caps them all. */
.municipality-header__logo[b-u0x91b7vmj] {
    flex: 0 0 auto;
    max-width: 7rem;
    max-height: 2.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Long official names ("Marktgemeinde Sankt Johann im Pongau") wrap onto a second line rather than
   being cut off — never a third, which would make the bar the tallest thing on a phone again. */
.municipality-header__name[b-u0x91b7vmj] {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.municipality-header__button[b-u0x91b7vmj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.35rem;
    line-height: 1;
    /* Also links (the bug report opens the support portal). */
    text-decoration: none;
}

.municipality-header__button:hover[b-u0x91b7vmj],
.municipality-header__button[aria-expanded="true"][b-u0x91b7vmj] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.municipality-header__button:focus-visible[b-u0x91b7vmj] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* The page's heading for screen readers below 992px, where the drawer with the visible title is
   closed (see Form.razor); from 992px the drawer's own h1 is the heading. */
.form-title--compact[b-u0x91b7vmj] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 992px) {
    .form-title--compact[b-u0x91b7vmj] {
        display: none;
    }
}

/* The header's buttons on the right: the bug report (dialog, from 992px) and the ⓘ — pinned right
   even when there is no name beside them to push them there. */
.municipality-header__actions[b-u0x91b7vmj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Bug report: in the header in the dialog, beside the cog in the form mode — both from 992px; below
   that in the info panel (.form-info__bug). */
.municipality-header__bug[b-u0x91b7vmj],
.form-heading__bug[b-u0x91b7vmj] {
    display: none;
}

@media (min-width: 992px) {
    .form-wrapper--slim-header .municipality-header__bug[b-u0x91b7vmj],
    .form-wrapper:not(.form-wrapper--slim-header) .form-heading__bug[b-u0x91b7vmj] {
        display: inline-flex;
    }

    /* Only the bug report would be in the panel — and that's in the header from here. */
    .municipality-header__info--phone-only[b-u0x91b7vmj],
    .form-info__bug[b-u0x91b7vmj] {
        display: none;
    }
}

/* Outside the cog's row (review, confirmation) it still stays at the trailing edge. */
.form-heading > .form-heading__bug[b-u0x91b7vmj] {
    margin-left: auto;
}

/* ── Title and buttons ───────────────────────────────────────────────────────────────────────── */
.form-heading[b-u0x91b7vmj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.form-heading__title[b-u0x91b7vmj] {
    flex: 1 1 20rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.form-heading__mode[b-u0x91b7vmj] {
    flex: 0 0 auto;
    min-width: 0;
    /* Stays pinned to the trailing edge even when the title beside it is absent (the entry page
       shows the title itself) — space-between alone only works with two children present. */
    margin-left: auto;
}

/* Same shape as ModeSwitch's unselected segment (see ModeSwitch.razor.css) so the two read as one
   control row. ::deep because the <button> is rendered by FormPrintButton/BlazorBootstrap. */
.form-heading__pdf[b-u0x91b7vmj] {
    flex: 0 0 auto;
}

.form-heading__pdf[b-u0x91b7vmj]  .btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
    font-size: 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.form-heading__pdf[b-u0x91b7vmj]  .btn .me-1 {
    margin-right: 0 !important;
}

/* Mode and language: switched in the row itself below 992px (the menu's bottom row); behind the
   settings button from 992px. The wrapper takes no box of its own, so the switches stay items of the
   row — sized and labelled by it as before (see .form-heading__mode in the drawer, and the
   "form-buttons" container in ModeSwitch.razor.css). */
.form-heading__inline-settings[b-u0x91b7vmj] {
    display: contents;
}

@media (min-width: 992px) {
    .form-heading__inline-settings[b-u0x91b7vmj] {
        display: none;
    }
}

@media (max-width: 991.98px) {
    /* Inside the row: must win over the button's own display further down. */
    .form-heading__mode .form-heading__settings[b-u0x91b7vmj] {
        display: none;
    }
}

.form-heading__settings[b-u0x91b7vmj] {
    display: inline-flex;
}

/* The settings and bug report buttons: the same round shape as the print button beside them. The
   bug report's display is set above (.form-heading__bug: only from 992px, in the form mode). */
.form-heading__settings[b-u0x91b7vmj],
.form-heading__bug[b-u0x91b7vmj] {
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
    font-size: 0.9rem;
    border-radius: 999px;
}

/* At rest only the printer icon shows; on hover/focus the label slides out beside it. The label is
   always in the DOM, so it is also the button's accessible name. Pure CSS (max-width + opacity);
   the row is right-aligned, so the button grows leftward and the mode switch stays put. */
.form-heading__pdf-long[b-u0x91b7vmj] {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    opacity: 0;
    transition:
        max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.7s ease 0.1s;
}

.form-heading__pdf[b-u0x91b7vmj]  .btn:hover .form-heading__pdf-long,
.form-heading__pdf[b-u0x91b7vmj]  .btn:focus-visible .form-heading__pdf-long {
    max-width: 20rem;
    margin-left: 0.4rem;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .form-heading__pdf-long[b-u0x91b7vmj] {
        transition: none;
    }
}

/* ── Shell: the drawer (title, buttons, dialog overview) and the content ──────────────────────
   The drawer is one element either way (see Form.razor): from 992px it takes no box of its own
   (display: contents), so the heading and the dialog's sidebar inside it become this grid's own items;
   below 992px, while filling, it is an off-canvas panel opened from the header's menu button. */
.form-shell[b-u0x91b7vmj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    min-width: 0;
}

.form-shell__main[b-u0x91b7vmj] {
    min-width: 0;
}

/* Dialog mode: the shell is the one flex item of .form-wrapper--dialog that grows, so it fills exactly
   the height left below the header — the transcript then scrolls inside it and the composer stays at
   its bottom (see ConversationRunner.razor.css), with no guessed pixel offset. Its minimum keeps the
   chat usable on a very short screen; past that the page scrolls instead of squeezing it. */
.form-shell--dialog[b-u0x91b7vmj] {
    flex: 1 1 0;
    min-height: 26rem;
    grid-template-rows: minmax(0, 1fr);
}

.form-shell--dialog .form-shell__main[b-u0x91b7vmj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Not below 992px: the slim bar has no room for the block — it is in the info panel there. */
.municipality-header__address[b-u0x91b7vmj] {
    display: none;
}

@media (min-width: 992px) {
    /* The drawer is laid out in place from here on — nothing for a menu button to open. */
    .municipality-header__menu[b-u0x91b7vmj] {
        display: none;
    }

    /* Form mode keeps the header it always had on a wide screen: the crest large, the address block
       (or the homepage) beside it, no name or info button. The dialog keeps the slim bar with its
       info panel at every width (.form-wrapper--slim-header): it leaves the chat the height. */
    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header[b-u0x91b7vmj] {
        justify-content: space-between;
        min-height: 0;
        padding-bottom: 0;
        margin-bottom: 1.5rem;
        border-bottom: none;
    }

    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header__logo[b-u0x91b7vmj] {
        max-width: min(100%, 240px);
        max-height: 80px;
    }

    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header__name[b-u0x91b7vmj],
    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header__actions[b-u0x91b7vmj],
    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header__info[b-u0x91b7vmj],
    .form-wrapper:not(.form-wrapper--slim-header) .form-info[b-u0x91b7vmj],
    .form-wrapper:not(.form-wrapper--slim-header) .form-info-backdrop[b-u0x91b7vmj] {
        display: none;
    }

    .form-wrapper:not(.form-wrapper--slim-header) .municipality-header__address[b-u0x91b7vmj] {
        display: block;
        min-width: 0;
        max-width: 50%;
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }

    /* Form mode with several pages: the steps above the page, as always — or, when chosen in the
       settings (.form-wrapper--steps-vertical), as the left column, staying in view while the page
       scrolls. Doubled class: must win over the plain .form-shell areas further down. */
    .form-wrapper:not(.form-wrapper--steps-vertical) .form-shell--steps[b-u0x91b7vmj]  .form-stepper--vertical,
    .form-wrapper--steps-vertical .form-shell--steps[b-u0x91b7vmj]  .form-stepper--inline {
        display: none;
    }

    .form-wrapper--steps-vertical .form-shell.form-shell--steps[b-u0x91b7vmj] {
        grid-template-columns: 16rem minmax(0, 1fr);
        grid-template-areas:
            "heading heading"
            "sidebar main";
    }

    .form-wrapper--steps-vertical .form-shell--steps[b-u0x91b7vmj]  .form-stepper--vertical {
        grid-area: sidebar;
        align-self: start;
        position: sticky;
        top: 1rem;
        padding: 1.25rem 1rem;
        border-radius: 1rem;
        background: var(--bs-tertiary-bg);
    }

    .form-shell[b-u0x91b7vmj] {
        grid-template-areas:
            "heading"
            "main";
    }

    .form-drawer[b-u0x91b7vmj] {
        display: contents;
    }

    .form-heading[b-u0x91b7vmj] {
        grid-area: heading;
    }

    .form-shell__main[b-u0x91b7vmj] {
        grid-area: main;
    }

    .form-drawer__close[b-u0x91b7vmj],
    .form-drawer-backdrop[b-u0x91b7vmj] {
        display: none;
    }

    .form-shell--dialog[b-u0x91b7vmj] {
        grid-template-columns: 21rem minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "heading heading"
            "sidebar main";
    }

    .form-shell--dialog[b-u0x91b7vmj]  .dialog-sidebar {
        grid-area: sidebar;
        min-height: 0;
    }
}

@media (max-width: 991.98px) {
    .form-drawer--collapsible[b-u0x91b7vmj] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: min(24rem, 88vw);
        padding: 0.75rem 1rem 1.25rem;
        overflow-y: auto;
        background: var(--bs-body-bg);
        box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .form-drawer--collapsible.is-open[b-u0x91b7vmj] {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .form-drawer__close[b-u0x91b7vmj] {
        display: flex;
        justify-content: flex-end;
    }

    /* Title at the top, the overview below it, the buttons pinned to the bottom. The heading takes
       no box of its own here (display: contents), so its title and buttons are the drawer's own
       items and can sit on either side of the overview. */
    .form-drawer--collapsible .form-heading[b-u0x91b7vmj] {
        display: contents;
    }

    /* Only as tall as its text: the title row's flex-basis (20rem, meant as a width) would otherwise
       become this column's height and push everything below it down. */
    .form-drawer--collapsible .form-heading__title[b-u0x91b7vmj] {
        order: 1;
        flex: 0 0 auto;
    }

    /* The overview takes the height between them, and only its list of blocks scrolls — the
       progress above it and the buttons below stay in view. */
    .form-drawer--collapsible[b-u0x91b7vmj]  .dialog-sidebar {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
        background: transparent;
    }

    .form-drawer--collapsible[b-u0x91b7vmj]  .dialog-sidebar__list {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Form mode: the steps are always the menu's list here, never above the page. */
    .form-shell--steps[b-u0x91b7vmj]  .form-stepper--inline {
        display: none;
    }

    /* Form mode: the pages instead of the overview — same place, and they scroll on their own too. */
    .form-drawer--collapsible[b-u0x91b7vmj]  .form-stepper--vertical {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Room for the current step's ring, which the scroll box would clip. */
        padding: 4px;
    }

    /* Print, mode and language in one row at the very bottom (margin-top: auto also holds it there
       in form mode, where there is no overview above it). A size container, so the mode switch can
       drop its labels when this row is narrow — see ModeSwitch.razor.css. */
    .form-drawer--collapsible .form-heading__mode[b-u0x91b7vmj] {
        order: 3;
        flex-wrap: nowrap;
        width: 100%;
        margin-top: auto;
        margin-left: 0;
        padding-top: 0.75rem;
        border-top: 1px solid var(--bs-border-color);
        container: form-buttons / inline-size;
    }

    .form-drawer--collapsible .form-heading__mode[b-u0x91b7vmj]  .mode-switch {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* No hover on a touch screen to slide the print label out — and no room for it in this row. */
    .form-drawer--collapsible .form-heading__pdf[b-u0x91b7vmj]  .btn:hover .form-heading__pdf-long,
    .form-drawer--collapsible .form-heading__pdf[b-u0x91b7vmj]  .btn:focus-visible .form-heading__pdf-long {
        max-width: 0;
        margin-left: 0;
        opacity: 0;
    }
}

/* ── Settings modal (cog) ────────────────────────────────────────────────────────────────────── */
.form-settings[b-u0x91b7vmj] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-settings__heading[b-u0x91b7vmj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.84375rem;
    font-weight: 600;
}

.form-settings__heading .bi[b-u0x91b7vmj] {
    font-size: 0.95rem;
}

/* The mode switch spans the modal, its two choices sharing the width. */
.form-settings[b-u0x91b7vmj]  .mode-switch {
    display: flex;
    width: 100%;
}

.form-settings[b-u0x91b7vmj]  .mode-switch__option {
    flex: 1 1 0;
    min-width: 0;
}

/* Selected items in the municipality's colour — the language list in the settings, the language
   dropdown in the menu: Bootstrap's list group and dropdown have their own active colour (a fixed
   blue), not --bs-primary, which this page sets to the municipality's colour. */
.form-wrapper[b-u0x91b7vmj]  .list-group {
    --bs-list-group-active-bg: var(--municipality-color, var(--bs-primary));
    --bs-list-group-active-border-color: var(--municipality-color, var(--bs-primary));
    --bs-list-group-active-color: #fff;
}

.form-wrapper[b-u0x91b7vmj]  .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--municipality-color, var(--bs-primary));
    --bs-dropdown-link-active-color: #fff;
}

/* How the steps are shown only matters on a wide screen — below 992px they are the menu's list. */
@media (max-width: 991.98px) {
    .form-settings__stepper[b-u0x91b7vmj] {
        display: none;
    }
}

/* ── Info panel (ⓘ): from the right, at every width ─────────────────────────────────────────── */
.form-info[b-u0x91b7vmj] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: min(24rem, 90vw);
    padding: 0.75rem 1.25rem 1.5rem;
    overflow-y: auto;
    background: var(--bs-body-bg);
    box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.form-info.is-open[b-u0x91b7vmj] {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
}

.form-info__close[b-u0x91b7vmj] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.form-info__section + .form-info__section[b-u0x91b7vmj] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

/* The footer's links, where the panel replaces the footer (see Form.razor's FooterClass). */
.form-info__legal[b-u0x91b7vmj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}

.form-info__heading[b-u0x91b7vmj] {
    margin-bottom: 0.6rem;
    color: var(--bs-secondary-color);
    font-size: 0.84375rem;
    font-weight: 600;
}

/* ── Backdrops behind either panel ───────────────────────────────────────────────────────────── */
.form-drawer-backdrop[b-u0x91b7vmj],
.form-info-backdrop[b-u0x91b7vmj] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.form-drawer-backdrop.is-open[b-u0x91b7vmj],
.form-info-backdrop.is-open[b-u0x91b7vmj] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .form-drawer--collapsible[b-u0x91b7vmj],
    .form-drawer--collapsible.is-open[b-u0x91b7vmj],
    .form-info[b-u0x91b7vmj],
    .form-info.is-open[b-u0x91b7vmj],
    .form-drawer-backdrop[b-u0x91b7vmj],
    .form-info-backdrop[b-u0x91b7vmj] {
        transition: none;
    }
}

/* Dialog mode: a flex column, so .form-shell--dialog can take exactly the height left below the
   header (see above). */
.form-wrapper--dialog[b-u0x91b7vmj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (max-width: 575.98px) {
    /* Outside the drawer (review, confirmation) the title takes the full width above the content. */
    .form-heading[b-u0x91b7vmj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-heading__mode[b-u0x91b7vmj] {
        width: 100%;
    }

    .form-heading__title[b-u0x91b7vmj] {
        flex-basis: auto;
        width: 100%;
    }
}
/* /Components/Pages/FormList.razor.rz.scp.css */
/* Widths fixed by the colgroup (see the table's comment): the name takes what the others leave.
   The action columns are as wide as their widest possible button — a dropdown with its caret. */
.form-list__table[b-fk20qu0p7o] {
    table-layout: fixed;
}

    .form-list__table td[b-fk20qu0p7o] {
        overflow-wrap: anywhere;
    }

.form-list__col-key[b-fk20qu0p7o] {
    width: 22%;
}

.form-list__col-sources[b-fk20qu0p7o] {
    width: 20%;
}

.form-list__col-print[b-fk20qu0p7o] {
    width: 7rem;
}

.form-list__col-open[b-fk20qu0p7o] {
    width: 7rem;
}

.form-list__col-language[b-fk20qu0p7o] {
    width: 4rem;
}

/* A fixed layout only takes from the name what the other columns don't need — on a phone, or at a
   high zoom level (WCAG 1.4.10), nothing would be left. There the table sizes itself by its
   content again; the column-jumping it brings matters less than a readable name. */
@media (max-width: 767.98px) {
    .form-list__table[b-fk20qu0p7o] {
        table-layout: auto;
    }
}

/* One table column per action (Drucken, Öffnen, language). The column is as wide as its widest
   button, and every button stretches to that width — a dropdown's caret no longer shifts the
   buttons out of line from one row to the next. Half the usual cell padding between the action
   columns keeps them as close together as the old button group. */
.form-list__action[b-fk20qu0p7o] {
    width: 1%;
    white-space: nowrap;
    padding-inline: 0.25rem;
}

    .form-list__action:last-child[b-fk20qu0p7o] {
        padding-inline-end: 0.5rem;
    }

    .form-list__action[b-fk20qu0p7o]  .btn {
        width: 100%;
    }

    /* A print error wraps below its button instead of stretching the column. */
    .form-list__action[b-fk20qu0p7o]  .text-danger {
        white-space: normal;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* The app ground (Papier, k360 manual Kap. 4.3) under the product mark — no gradient: the brand
   gradient stays off product surfaces (Kap. 1.3/4.1); only the login card carries it (Kap. 10.3). */
.home-hero[b-h8oa7iicc1] {
    background: var(--k-papier);
}

.home-hero-tagline[b-h8oa7iicc1] {
    margin-top: 0.5rem;
}

/* The window's height, no more (see Home.razor): the cards' area grows, the footer stays below. */
.home-page[b-h8oa7iicc1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.home-content[b-h8oa7iicc1] {
    flex: 1 0 auto;
}
/* /Components/Pages/IdAustriaCompleting.razor.rz.scp.css */
.ida-completing[b-wf2ucu2uju] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--bs-tertiary-bg);
}

.ida-completing-card[b-wf2ucu2uju] {
    width: 100%;
    max-width: 30rem;
    border: 0;
}

/* Shield in a softly pulsing double ring — "working", without a clock or a percentage we cannot know. */
.ida-emblem[b-wf2ucu2uju] {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-size: 2.5rem;
}

.ida-emblem[b-wf2ucu2uju]::before,
.ida-emblem[b-wf2ucu2uju]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--bs-primary-rgb), .35);
    animation: ida-pulse-b-wf2ucu2uju 2.4s ease-out infinite;
}

.ida-emblem[b-wf2ucu2uju]::after {
    animation-delay: 1.2s;
}

.ida-emblem--idle[b-wf2ucu2uju] {
    background: rgba(var(--bs-warning-rgb), .12);
}

.ida-emblem--idle[b-wf2ucu2uju]::before,
.ida-emblem--idle[b-wf2ucu2uju]::after {
    display: none;
}

.ida-progress[b-wf2ucu2uju] {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(var(--bs-primary-rgb), .12);
}

.ida-progress[b-wf2ucu2uju]::before {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: var(--bs-primary);
    animation: ida-slide-b-wf2ucu2uju 1.6s ease-in-out infinite;
}

.ida-steps[b-wf2ucu2uju] {
    max-width: 22rem;
}

.ida-steps li[b-wf2ucu2uju] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem 0;
}

/* One fixed, centered slot for every step marker, so checks, spinner and circle sit on the same axis
   and the texts start at the same x. The icon font's own offset (.bi::before vertical-align -.125em)
   and the inherited 1.5 line height would otherwise push the glyphs below the spinner. Sizes are set
   explicitly: Blazor.Bootstrap shrinks .spinner-border-sm, and the icon glyphs fill their em box. */
.ida-step-icon[b-wf2ucu2uju] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
}

.ida-step-icon .bi[b-wf2ucu2uju]::before {
    display: block;
    vertical-align: 0;
}

.ida-step-icon .spinner-border[b-wf2ucu2uju] {
    width: 1.0625rem;
    height: 1.0625rem;
    border-width: .15rem;
}

.ida-slow[b-wf2ucu2uju] {
    opacity: 0;
    animation: ida-fade-in-b-wf2ucu2uju .6s ease 12s forwards;
}

@keyframes ida-pulse-b-wf2ucu2uju {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(1.7); opacity: 0; }
}

@keyframes ida-slide-b-wf2ucu2uju {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@keyframes ida-fade-in-b-wf2ucu2uju {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ida-emblem[b-wf2ucu2uju]::before,
    .ida-emblem[b-wf2ucu2uju]::after,
    .ida-progress[b-wf2ucu2uju]::before {
        animation: none;
    }

    .ida-progress[b-wf2ucu2uju]::before {
        width: 100%;
    }

    .ida-slow[b-wf2ucu2uju] {
        animation: ida-fade-in-b-wf2ucu2uju 0s linear 12s forwards;
    }
}
/* /Components/Pages/MunicipalityManagement.razor.rz.scp.css */
/* ── Gemeinde-Auswahl (Picker) ────────────────────────────────────────────── */

/* Its own row below the title, sized like the other admin pages' search fields. */
.municipality-picker[b-otrfsq0fde] {
    width: 100%;
    max-width: 420px;
}

/* Floats below the search box as an overlay instead of pushing the rest of the header row down —
   the standard searchable-dropdown/combobox presentation. z-index just needs to clear this row's
   own content; nothing else on the page uses one. */
.municipality-picker .municipality-list[b-otrfsq0fde] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    /* About eight entries; the search narrows the rest. */
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The municipality the arrow keys are on (aria-activedescendant) — an outline, so it shows on the
   chosen one's blue as well. */
.municipality-picker .municipality-list .is-highlighted[b-otrfsq0fde] {
    outline: 2px solid var(--bs-focus-ring-color, rgba(13, 110, 253, .5));
    outline-offset: -3px;
    z-index: 3;
}

.municipality-picker .municipality-list .is-highlighted:not(.active)[b-otrfsq0fde] {
    background-color: var(--bs-tertiary-bg);
}

.municipality-picker .municipality-list [role="option"][b-otrfsq0fde] {
    cursor: pointer;
}

/* The chosen tab: underlined as well as filled, so it doesn't show by colour alone. */
.municipality-tabs .nav-link[aria-selected="true"][b-otrfsq0fde] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .35em;
}

/* ── Live-Vorschau ─────────────────────────────────────────────────────────── */

/* position:absolute + inset:0 against its own position:relative wrapper (see the .css-editor
   comment below for why) — an <iframe> is a replaced element with its own quirky intrinsic sizing,
   on top of the general flex-item min-height:auto issue, so anchoring it as flex-grow's actual
   target is doubly unreliable. */
.municipality-preview-frame[b-otrfsq0fde] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
}

/* ── Gemeinde-CSS-Editor: Code-Editor-Optik ─────────────────────────────────
   The <textarea> sits transparently on top of a syntax-highlighted <pre><code>
   (the standard "poor man's code editor" overlay) — see municipalityCssEditor.js.
   The .cssh-* token colors it uses live in app.css, not here: they're applied to <span> elements
   municipalityCssEditor.js injects via innerHTML, which never get this component's scope
   attribute, so a scoped rule here could never match them.

   .css-editor is deliberately position:absolute + inset:0 against its own
   position:relative wrapper (which is the actual flex-grow: 1; min-height: 0 participant) rather
   than being the flex item itself. A flex item's default min-height is "auto", not 0 — long CSS
   content in the textarea previously made this element (and everything above it) grow past the
   space it was allotted instead of scrolling internally, even with min-height:0 applied directly
   to it, because normal-flow content still contributes to a flex item's own intrinsic size
   calculation. An absolutely positioned element is removed from normal flow entirely: it always
   fills exactly its containing block's box, completely independent of how much content is inside
   it. ── */

.css-editor[b-otrfsq0fde] {
    position: absolute;
    inset: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #f6f8fa;
    overflow: hidden;
}

.css-editor-highlight[b-otrfsq0fde],
.css-editor-textarea[b-otrfsq0fde] {
    display: block;
    margin: 0;
    padding: 0.75rem;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 2;
}

.css-editor-highlight[b-otrfsq0fde] {
    color: #24292f;
    overflow: auto;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.css-editor-textarea[b-otrfsq0fde] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    resize: none;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: #24292f;
    outline: none;
}

.css-editor-textarea[b-otrfsq0fde]::selection {
    background: rgba(var(--bs-primary-rgb), 0.35);
    color: transparent;
}

@media (prefers-color-scheme: dark) {
    .css-editor[b-otrfsq0fde] { background: #1e1f22; border-color: #3a3b3e; }
    .css-editor-highlight[b-otrfsq0fde] { color: #d4d4d4; }
    .css-editor-textarea[b-otrfsq0fde] { caret-color: #f0f0f0; }
    .css-editor-textarea[b-otrfsq0fde]::selection { background: rgba(102, 178, 255, 0.35); }
}

/* Same overrides, keyed off an explicit theme attribute rather than the OS preference, in case
   this admin area ever opts into Bootstrap 5.3's data-bs-theme toggle. */
[data-bs-theme="dark"] .css-editor[b-otrfsq0fde] { background: #1e1f22; border-color: #3a3b3e; }
[data-bs-theme="dark"] .css-editor-highlight[b-otrfsq0fde] { color: #d4d4d4; }
[data-bs-theme="dark"] .css-editor-textarea[b-otrfsq0fde] { caret-color: #f0f0f0; }
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-page[b-bq9pz8sffx] {
    max-width: 720px;
}
/* /Components/Pages/SubmissionInbox/InboxFolders.razor.rz.scp.css */
/* The forms scroll on their own, the header staying put — a municipality may have hundreds. */
.inbox-forms[b-rxun801dum] {
    max-height: 60vh;
    overflow: auto;
}

.inbox-forms thead th[b-rxun801dum] {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Opaque, so scrolled rows don't show through the header. */
    background-color: var(--bs-table-bg, var(--bs-tertiary-bg));
}

/* Who may read an inbox: long lists of users scroll within the inbox. */
.inbox-users[b-rxun801dum] {
    max-height: 16rem;
    overflow-y: auto;
}
/* /Components/Pages/SubmissionInbox/SubmissionEntries.razor.rz.scp.css */
/* One table column per action (PDF, Öffnen), as in the form list: the column is as wide as its
   widest button and every button stretches to it, so a signed row's menu caret doesn't shift the
   buttons out of line from one row to the next. */
.submission-entries__action[b-kj6pie97yo] {
    width: 1%;
    white-space: nowrap;
    padding-inline: 0.25rem;
}

    .submission-entries__action:last-child[b-kj6pie97yo] {
        padding-inline-end: 0.5rem;
    }

    .submission-entries__action[b-kj6pie97yo]  .btn {
        width: 100%;
    }
/* /Components/Pages/SubmissionInbox/SubmissionMunicipalities.razor.rz.scp.css */
/* The municipality cards are the primary action on this page — they need to read as clickable. Hover
   marks the card with the active edge (brand-200) and tint instead of lifting it: a shadow means
   "lies above something" (k360 manual Kap. 6.4), and motion only where it explains a change (6.5).
   Same treatment as the start page's HomeCard. */
.inbox-scope-card[b-ttwr9tfqix] {
    border: 1px solid var(--k-linie) !important;
    transition: border-color var(--k-d-schnell) var(--k-kurve), background-color var(--k-d-schnell) var(--k-kurve);
}

.inbox-scope-card:hover[b-ttwr9tfqix] {
    border-color: var(--k-brand-200) !important;
    background-color: var(--k-brand-50);
}

/* Keyboard focus must stay obvious even though the card is a bare anchor. */
.inbox-scope-card:focus-visible[b-ttwr9tfqix] {
    outline: none;
    box-shadow: var(--k-fokus) !important;
}
/* /Components/Pages/UserManagement.razor.rz.scp.css */
[b-j6xyiqg9lv] .municipality-list .list-group-item:hover {
    background-color: var(--bs-tertiary-bg);
}
/* /Components/Shared/ActionDropdown.razor.rz.scp.css */
/* A long list (e.g. one entry per municipality for an administrator) scrolls instead of running off
   the page. */
.action-dropdown__menu[b-0ed1jc7eug] {
    max-height: 320px;
    overflow-y: auto;
}
/* /Components/Shared/BrandLogo.razor.rz.scp.css */
/* Top-aligned, not centered: the "360" of the wordmark sits below the image's middle, so "Forms" is
   placed by explicit offsets from the image's top edge instead (see below). */
.brand-logo[b-a0mcfcbkqz] {
    display: inline-flex;
    align-items: flex-start;
    gap: calc(var(--brand-logo-height) * 0.12);
    white-space: nowrap;
    line-height: 1;
}

.brand-logo img[b-a0mcfcbkqz] {
    display: block;
    height: var(--brand-logo-height);
    width: auto;
}

/* "Forms" set to the exact cap height and baseline of the "360" glyphs, measured in the wordmark
   file (k360-primaerlogo.svg): glyph tops at 30.8 %, baseline at 77.0 % of the image height, so caps
   46.2 % tall. Public Sans (the UI font, manual Kap. 5.1; from its OS/2 table, typo metrics in use):
   capitals 0.723 em tall (1446/2000); ascent 0.95 + descent 0.225 em in a line-height:1 box puts the
   baseline 0.8625 em below the box top. Hence font-size = 0.462 / 0.723 = 0.639 x the image height,
   and the line box starts 0.770 - 0.8625 x 0.639 = 0.219 x the image height below the image's top.
   Identical to k360 Sign's logo, so both products of the suite set their name the same way.
   A lighter weight than the wordmark keeps k360 the dominant part; the colour is the wordmark's
   "360" (#0053AF). */
.brand-logo-suffix[b-a0mcfcbkqz] {
    font-family: var(--bs-font-sans-serif);
    font-size: calc(var(--brand-logo-height) * 0.639);
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    margin-top: calc(var(--brand-logo-height) * 0.219);
    color: #0053AF;
}
/* /Components/Shared/FilePicker.razor.rz.scp.css */
/* A form-control in a row of form-controls — same edge, height and font — holding a button-like
   label and the status text. The real input lies invisibly over all of it (.file-picker__input),
   so the box reacts as a whole: hover and focus are styled here on the box, not on the button. */
.file-picker[b-mv9apbbay6] {
    --file-picker-accent: var(--bs-primary);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    /* The form-control's own height: its padding less what the button's edge and padding add. */
    padding-block: calc(0.375rem - 0.1875rem - var(--bs-border-width));
    padding-inline: calc(0.375rem - 0.1875rem - var(--bs-border-width)) 0.75rem;
}

/* In a citizen's form the municipality's colour, as for its other buttons (app.css .form-wrapper). */
.form-wrapper .file-picker[b-mv9apbbay6] {
    --file-picker-accent: var(--municipality-color);
}

/* In a narrow column the status text gives way first (no width of its own), then the button's text
   is cut off — the box never overflows its column. */
.file-picker__button[b-mv9apbbay6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.1875rem 0.625rem;
    border: var(--bs-border-width) solid var(--file-picker-accent);
    border-radius: var(--bs-border-radius-sm);
    color: var(--file-picker-accent);
    font-weight: 600;
    line-height: 1.5;
    transition: color var(--k-d-schnell) var(--k-kurve), background-color var(--k-d-schnell) var(--k-kurve);
}

.file-picker:not(.file-picker--disabled):hover .file-picker__button[b-mv9apbbay6] {
    background-color: var(--file-picker-accent);
    color: #fff;
}

.file-picker__button > span[b-mv9apbbay6],
.file-picker__status[b-mv9apbbay6] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-picker__status[b-mv9apbbay6] {
    flex: 1 1 0;
    color: var(--bs-secondary-color);
}

/* As a focused form-control (site.scss $input-focus-*; app.css .form-wrapper for a citizen's form) —
   only for keyboard focus: a click opens the browser's file dialog, and the ring would stay behind.
   The outline is app.css's keyboard focus on every control: the input that carries it here is
   invisible, so the box shows it instead. */
.file-picker:has(:focus-visible)[b-mv9apbbay6] {
    border-color: var(--k-brand-600);
    box-shadow: var(--k-fokus);
    outline: 2px solid #1d1d1f;
    outline-offset: 2px;
}

.form-wrapper .file-picker:has(:focus-visible)[b-mv9apbbay6] {
    border-color: var(--municipality-color);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--municipality-color) 25%, transparent);
}

/* As a disabled form-control: surface and text, not opacity (site.scss, Kap. 8.1). */
.file-picker--disabled[b-mv9apbbay6] {
    background-color: var(--bs-secondary-bg);
}

    .file-picker--disabled .file-picker__button[b-mv9apbbay6] {
        border-color: var(--bs-border-color);
        color: var(--bs-secondary-color);
    }

/* InputFile renders the input itself, outside this component's scope — hence ::deep. */
.file-picker[b-mv9apbbay6]  .file-picker__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

    .file-picker[b-mv9apbbay6]  .file-picker__input:disabled {
        cursor: not-allowed;
    }
/* /Components/Shared/FullScreenLoadingOverlay.razor.rz.scp.css */
.fullscreen-loading-overlay[b-j7053h79aw] {
    position: fixed;
    inset: 0;
    z-index: 1080; /* above Bootstrap modals (1055) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--bs-body-bg, #fff);
}

.fullscreen-loading-overlay .spinner-border[b-j7053h79aw] {
    width: 3rem;
    height: 3rem;
}

.fullscreen-loading-overlay__text[b-j7053h79aw] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.05rem;
}
/* /Components/Shared/ModeSwitch.razor.rz.scp.css */
/* A segmented control: one rounded track, two segments, the active one tinted. Compact on purpose —
   this is a view preference, not a step in the application, so it must not read as an action to take. */

.mode-switch[b-gsucyj0n0b] {
    max-width: 100%;
    border-radius: 999px;
}

.mode-switch__option[b-gsucyj0n0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding-inline: 0.9rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* The selected segment: the primary tint with its emphasis text (5.50:1 and more), via the theme
   variables — so on the citizen form it follows the municipality colour (Form.razor.css remaps them).
   Four classes, to outrank Form.razor.css's .btn-outline-primary remapping on the same element. */
.btn-group.mode-switch > .btn.mode-switch__option--selected[b-gsucyj0n0b] {
    --bs-btn-bg: var(--bs-primary-bg-subtle);
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
    --bs-btn-hover-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    font-weight: 600;
    /* The tint alone sets it apart from the other segment by only about 1.2:1, and every button is
       semibold now — a bar in the primary colour marks the choice (over 5:1, WCAG 1.4.11). */
    box-shadow: inset 0 -3px 0 var(--bs-primary);
}

.mode-switch__option:first-child[b-gsucyj0n0b] {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    padding-left: 1.05rem;
}

.mode-switch__option:last-child[b-gsucyj0n0b] {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    padding-right: 1.05rem;
}

/* In a narrow row of buttons (the form page's menu, see Form.razor.css's "form-buttons" container)
   the icons alone carry the choice; the label stays the button's accessible name, and its title. */
@container form-buttons (max-width: 20.5rem) {
    .mode-switch__label[b-gsucyj0n0b] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mode-switch__option[b-gsucyj0n0b],
    .mode-switch__option:first-child[b-gsucyj0n0b],
    .mode-switch__option:last-child[b-gsucyj0n0b] {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .mode-switch[b-gsucyj0n0b] {
        display: flex;
        width: 100%;
    }

    .mode-switch__option[b-gsucyj0n0b] {
        flex: 1 1 0;
        min-width: 0;
        /* A comfortable one-handed target, which 2.5rem is not. */
        min-height: 2.75rem;
    }
}
/* /Components/Shared/MunicipalityAddressBlockView.razor.rz.scp.css */
/* One line per entry, like a letterhead — a column of spans rather than <br>s, so a line without a
   value simply isn't there instead of leaving a gap. */
.municipality-address[b-w10ml3l7yw] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-style: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.municipality-address__name[b-w10ml3l7yw] {
    margin-bottom: 0.15rem;
}
/* /Components/Shared/SortableTableHeader.razor.rz.scp.css */
.column-filter[b-u1s8a8nh7u] {
    width: 20rem;
}

/* The chips and the input share one bordered field, styled as the form control it stands for —
   including the focus ring, which the borderless input inside can't show itself. */
.column-filter__field[b-u1s8a8nh7u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    cursor: text;
}

    /* Same as a focused .form-control: the theme's ring (site.css) plus app.css's dark keyboard
       outline — drawn around the whole field rather than the bare input inside it. Only for the
       input: a chip's remove button shows its own focus outline, not a second ring around all. */
    .column-filter__field:has(.column-filter__input:focus)[b-u1s8a8nh7u] {
        border-color: #0F6CBD;
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0F6CBD;
        outline: 2px solid #1d1d1f;
        outline-offset: 2px;
    }

.column-filter__input[b-u1s8a8nh7u] {
    flex: 1 1 6rem;
    min-width: 6rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

    /* !important against app.css's global :focus-visible outline, which the field above takes over. */
    .column-filter__input:focus-visible[b-u1s8a8nh7u] {
        outline: none !important;
    }

.column-filter__chip[b-u1s8a8nh7u] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    font-weight: 500;
}

.column-filter__chip-remove[b-u1s8a8nh7u] {
    width: 0.5em;
    height: 0.5em;
    padding: 0.15em;
    background-size: 0.5em;
}