/* /Admin/AdminCompanies.razor.rz.scp.css */
/* A ruled row rather than a gap between two of them: the queue reads as one
   list of filings, and the rule is what the app already uses everywhere
   else to separate them. The last row keeps its padding but drops the line, so
   the panel does not end on a stray rule. */
.admin-company-row[b-ukl9rga7cq] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.admin-company-row:first-child[b-ukl9rga7cq] {
    padding-top: 0;
}

.admin-company-row:last-child[b-ukl9rga7cq] {
    border-bottom: none;
    padding-bottom: 0;
}
/* /Companies/CompanyDirectory.razor.rz.scp.css */
/* The name's link covers the whole card, so the card is the target without
   wrapping the favourite button in an anchor. The button sits above that
   overlay and keeps its own click. */
.directory-card[b-h261a6ara5]  .directory-surface {
    position: relative;
    border-radius: var(--card-radius);
    box-shadow: var(--mud-elevation-1);
}

.directory-card[b-h261a6ara5]  .directory-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.directory-card[b-h261a6ara5]  .directory-favourite {
    position: relative;
    z-index: 1;
}

/* min-width: 0 lets a long name wrap inside the flex row instead of pushing
   the star out of the card. */
.directory-card[b-h261a6ara5]  .directory-text {
    min-width: 0;
}

.directory-card[b-h261a6ara5]  .directory-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The lift of ListCard, which this card follows. */
.directory-card:hover[b-h261a6ara5]  .directory-surface,
.directory-card:focus-within[b-h261a6ara5]  .directory-surface {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-4);
}

@media (prefers-reduced-motion: no-preference) {
    .directory-card[b-h261a6ara5]  .directory-surface {
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .directory-card:hover[b-h261a6ara5]  .directory-surface {
        transform: translateY(-2px);
    }
}
/* /Companies/CompanyProfileEditor.razor.rz.scp.css */
/* The record as a document: ruled rows, label beside value once there is room
   for two columns and stacked when there is not. */
.record-list[b-s9t5qjadw8] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
}

/* Size and colour come from the theme's own variables rather than literals, so
   AuftragTheme stays the single place the caption step is defined. */
.record-list dt[b-s9t5qjadw8] {
    font-size: var(--mud-typography-caption-size);
    line-height: var(--mud-typography-caption-lineheight);
    color: var(--mud-palette-text-secondary);
    margin: 0;
    padding: 0.75rem 0 0;
}

.record-list dd[b-s9t5qjadw8] {
    margin: 0;
    padding: 0 0 0.75rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--mud-palette-divider);
}

@media (min-width: 600px) {
    .record-list[b-s9t5qjadw8] {
        grid-template-columns: minmax(9rem, 1fr) 2fr;
        column-gap: 2rem;
    }

    /* The rule belongs to the row, not to the value: on two columns a border
       on dd alone stops halfway across the card. */
    .record-list dt[b-s9t5qjadw8] {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .record-list dd[b-s9t5qjadw8] {
        padding: 0.75rem 0;
    }
}

/* Keeps Speichern in reach at the bottom of a ten-field form. The negative
   margins let the bar span the MudPaper's own padding so the background covers
   the fields scrolling underneath it. */
.profile-actions[b-s9t5qjadw8] {
    position: sticky;
    bottom: 0;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Companies/PromotedCompanies.razor.rz.scp.css */
.promoted-strip[b-ghpcwvazk6] {
    width: 100%;
}

/* Out of the page container, whose 1232px holds six tiles: nine tiles and their
   gaps are 1658px. A negative margin rather than 100vw alone, which counts the
   scrollbar and would make the page scroll sideways. */
.promoted-strip.break-out[b-ghpcwvazk6] {
    --strip-width: min(100vw - 48px, 1658px);
    width: var(--strip-width);
    margin-left: calc((100% - var(--strip-width)) / 2);
}

.promoted-grid[b-ghpcwvazk6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.promoted-logo[b-ghpcwvazk6] {
    width: 170px;
    height: 98px;
}

/* The whole tile is the link; block, so the shadow frames the full tile. */
.promoted-logo[b-ghpcwvazk6]  a {
    display: block;
    height: 100%;
}

.promoted-logo[b-ghpcwvazk6]  .promoted-surface {
    padding: 15px;
}

.promoted-logo.linked:hover[b-ghpcwvazk6]  .promoted-surface,
.promoted-logo.linked:focus-within[b-ghpcwvazk6]  .promoted-surface {
    box-shadow: var(--mud-elevation-6);
}

.promoted-dots[b-ghpcwvazk6]  .mud-icon-root {
    width: 12px;
    height: 12px;
}

/* Two tiles of 170px do not fit a 375px phone, so here the tile follows the
   column and keeps its proportions. */
@media (max-width: 599.98px) {
    .promoted-strip.break-out[b-ghpcwvazk6] {
        --strip-width: calc(100vw - 32px);
    }

    .promoted-grid[b-ghpcwvazk6] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    }

    .promoted-logo[b-ghpcwvazk6] {
        width: auto;
        height: auto;
        aspect-ratio: 170 / 98;
    }

    .promoted-logo[b-ghpcwvazk6]  .promoted-surface {
        padding: 10px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .promoted-logo[b-ghpcwvazk6]  .promoted-surface {
        transition: box-shadow 150ms ease;
    }
}
/* /Dashboard/Dashboard.razor.rz.scp.css */
/* One row of "Was Sie jetzt betrifft": an icon column and a stacked title and
   caption, so every row has the same shape whatever the job is called. */
.attention-row[b-i70zraat9j] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

/* The icon is rendered by MudIcon, so it carries no scope attribute of its own --
   see Pages/Home.razor.css for why ::deep needs the scoped ancestor in front of
   it. The nudge puts the glyph on the link's baseline rather than its box top. */
.attention-row[b-i70zraat9j]  .mud-icon-root {
    margin-top: 0.15rem;
}

/* MudText renders Typo.caption as a span, so the deadline would otherwise run on
   from the job title and wrap mid-phrase on a phone -- the title's last words and
   the caption's first sharing a line. Its own line keeps the two readable. */
.attention-row[b-i70zraat9j]  .mud-typography-caption {
    display: block;
}
/* /Dashboard/RecommendedJobRow.razor.rz.scp.css */
/* Logo, what and who, and the Frist at the end of the line; on a phone the
   Frist drops under the text. */
.recommended-row[b-jqduzf7f67] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.what[b-jqduzf7f67] {
    min-width: 0;
}

.title-line[b-jqduzf7f67] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.recommended-row[b-jqduzf7f67]  .title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.recommended-row[b-jqduzf7f67]  .new {
    font-weight: 600;
}

.place[b-jqduzf7f67] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.when[b-jqduzf7f67]  .deadline {
    white-space: nowrap;
}

.when[b-jqduzf7f67]  .deadline .mud-typography {
    font-weight: 700;
}

@media (max-width: 599.98px) {
    .recommended-row[b-jqduzf7f67] {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 12px 16px;
    }

    .when[b-jqduzf7f67] {
        grid-column: 2;
    }
}
/* /Dashboard/RecommendedJobs.razor.rz.scp.css */
.rows[b-lexiiclgj5] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.other-trades[b-lexiiclgj5] {
    padding: 12px 24px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

@media (max-width: 599.98px) {
    .other-trades[b-lexiiclgj5] {
        padding: 12px 16px;
    }
}
/* /Jobs/CardList.razor.rz.scp.css */
/* A bidder reads a few jobs closely rather than scanning a dense table. */
.card-list[b-o5x9o2tdt3] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}
/* /Jobs/CategoryPicker.razor.rz.scp.css */
.category-picker[b-o1pcesqis8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

/* The landing-page tile, smaller: name on the photo over a dark fade. */
.category-option[b-o1pcesqis8] {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: var(--card-radius);
    background-color: #DCE4F0;
    box-shadow: var(--mud-elevation-1);
    color: #FFFFFF;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.category-option[b-o1pcesqis8]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 60, 0) 35%, rgba(0, 20, 60, 0.78) 100%);
}

.category-option img[b-o1pcesqis8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-option-icon[b-o1pcesqis8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mud-palette-primary);
}

.category-option-name[b-o1pcesqis8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
}

.category-option-check[b-o1pcesqis8] {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 1;
    display: flex;
    color: #FFFFFF;
}

.category-option:hover[b-o1pcesqis8],
.category-option:focus-visible[b-o1pcesqis8] {
    box-shadow: var(--mud-elevation-6);
}

.category-option:focus-visible[b-o1pcesqis8] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.category-option.selected[b-o1pcesqis8] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.category-option:disabled[b-o1pcesqis8] {
    cursor: default;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .category-option[b-o1pcesqis8] {
        transition: none;
    }
}
/* /Jobs/FindJobs.razor.rz.scp.css */
/* The refresh bar sits in the gap above the cards rather than in a row of
   its own, which cost a laptop screen most of a card row. */
.list-area[b-4b6qga8p1h] {
    position: relative;
}

.loading-slot[b-4b6qga8p1h] {
    position: absolute;
    inset: -8px 0 auto 0;
    height: 4px;
}

.marketplace-page[b-4b6qga8p1h] {
    max-width: 1600px;
    margin-inline: auto;
}

/* Wide enough for a place name, its bar and its count on one line. Scoped
   although MudMenu renders it in the popover layer: the attribute comes from
   where the markup is written. */
.places-menu[b-4b6qga8p1h] {
    width: 320px;
    padding: 8px 12px 0;
}

.results[b-4b6qga8p1h] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Title and count on one baseline, the order select at the end of the line. */
.results-head[b-4b6qga8p1h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.results-head .title[b-4b6qga8p1h] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    min-width: 0;
}

.head-controls[b-4b6qga8p1h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* MudSelect takes the whole line it is given; the wrapper is what keeps the
   order a small setting at the end of the title line. */
.sort-select[b-4b6qga8p1h] {
    flex: 0 0 180px;
    width: 180px;
}

.trade-scope[b-4b6qga8p1h],
.selection[b-4b6qga8p1h],
.toolbar[b-4b6qga8p1h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* The sheet holds the map and every filter, which is taller than a phone. */
.sheet[b-4b6qga8p1h] {
    max-height: 85vh;
    overflow-y: auto;
}
/* /Jobs/JobBookmarkButton.razor.rz.scp.css */
/* Above the card's stretched link (see ListCard), or the click would
   open the job instead of saving it. */
.bookmark[b-2flfbsl8zj] {
    position: relative;
    z-index: 1;
    display: inline-flex;
}
/* /Jobs/JobCategoryLabel.razor.rz.scp.css */
/* Not a MudChip: its 24px small size is taller than the card's meta line it
   sits in, and the card's height is what decides how many rows fit a screen.
   Cut only when the name alone is wider than the line: a share of the parent
   cut "Elektro" to "El…" wherever the parent was only as wide as a short title. */
.category-label[b-pqsbqie1ui] {
    display: inline-block;
    max-width: 100%;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 18px;
}
/* /Jobs/JobDescription.razor.rz.scp.css */
/* The one thing MudBlazor has no component or utility for: a job description is
   entered in a multi-line textarea, so the paragraph breaks the company typed
   have to survive rendering. Scoped per CLAUDE.md -- never a global stylesheet,
   and never an inline style attribute.

   Applied to a plain <div> wrapper rather than to the MudText itself: CSS
   isolation only stamps its scope attribute onto elements this component writes,
   so a rule aimed at a child component's own output silently matches nothing.
   white-space inherits, which is what carries it down to the rendered <p>.

   A description is running prose, so it also needs a measure. At 1440px the
   block ran the full card width -- about 146 characters per line, roughly double
   the comfortable range. */
.job-description[b-oof6vic6gn] {
    white-space: pre-wrap;
    max-width: 72ch;
}

/* Six lines, as JobDescription.CollapsedLines says. */
.job-description.collapsed[b-oof6vic6gn] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}
/* /Jobs/JobFact.razor.rz.scp.css */
.fact[b-o9qwzdatai] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fact.end[b-o9qwzdatai] {
    margin-left: auto;
}

.sr-label[b-o9qwzdatai] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Jobs/JobFactLine.razor.rz.scp.css */
.facts[b-a50dyj4vso] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Jobs/JobFormWhatFields.razor.rz.scp.css */
/* The wrapper div is what carries this component's scope attribute. */
.what-fields[b-unzo0zv3zu]  .category-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--card-radius);
}
/* /Jobs/JobInterestList.razor.rz.scp.css */
/* The whole row opens the offer, so it says so to the pointer. MudTable puts
   RowClass on its own tr, outside this file's scope. */
[b-dz8jjfqjnj] .interest-row {
    cursor: pointer;
}

.interest-drawer[b-dz8jjfqjnj] {
    padding: 16px 24px 24px;
    overflow-y: auto;
    height: 100%;
}
/* /Jobs/JobInterestPanel.razor.rz.scp.css */
/* Read by a screen reader, not shown: the same sentence is already on screen
   under the field. */
.screen-reader-only[b-jt86lbflx2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Jobs/JobWizard.razor.rz.scp.css */
/* The preview card is one MarketplaceJobRow, a list item laid out by the
   width of its nearest container, as in the Auftragssuche. */
.preview[b-ayqhb6fu7j] {
    container-type: inline-size;
    margin: 0;
    padding: 0;
}
/* /Jobs/ListCard.razor.rz.scp.css */
/* MudPaper renders its own element, which this file's scope does not reach;
   hence ::deep from the list item that is ours. The card-* classes are the
   anatomy the job and offer cards share. */
.list-card-item[b-2m76mzkf1j] {
    list-style: none;
}

.list-card-item[b-2m76mzkf1j]  .list-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    border-radius: var(--card-radius);
    box-shadow: var(--mud-elevation-1);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.list-card-item.interactive:hover[b-2m76mzkf1j]  .list-card {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-4);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .list-card-item[b-2m76mzkf1j]  .list-card {
        transition: none;
    }

    .list-card-item.interactive:hover[b-2m76mzkf1j]  .list-card {
        transform: none;
    }
}

/* Title and byline, with a chip or the Frist at the end of the line. The
   title block takes the room, so a byline under a short title is as wide
   as the card. */
.list-card-item[b-2m76mzkf1j]  .card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.list-card-item[b-2m76mzkf1j]  .card-who {
    flex: 1 1 auto;
    min-width: 0;
}

.list-card-item[b-2m76mzkf1j]  .card-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
}

.list-card-item[b-2m76mzkf1j]  .card-standing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.list-card-item[b-2m76mzkf1j]  .title {
    line-height: 1.3;
}

.list-card-item[b-2m76mzkf1j]  .card-link {
    color: var(--mud-palette-text-primary);
}

.list-card-item[b-2m76mzkf1j]  .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.list-card-item.interactive:hover[b-2m76mzkf1j]  .card-link {
    color: var(--mud-palette-primary);
}

.list-card-item[b-2m76mzkf1j]  .action {
    position: relative;
    z-index: 1;
}

.list-card-item[b-2m76mzkf1j]  .card-link:focus-visible {
    outline: none;
}

.list-card-item[b-2m76mzkf1j]  .card-link:focus-visible::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--card-radius);
}

.list-card-item[b-2m76mzkf1j]  .strong {
    font-weight: 600;
}
/* /Jobs/MarketplaceJobRow.razor.rz.scp.css */
.job-row[b-r38hq65h1q] {
    display: contents;
}

/* Logo, who and what, and the Frist at the end of the same line. Below
   600px the Frist moves under the title block. */
.head[b-r38hq65h1q] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo who"
        "when when";
    gap: 8px 16px;
    align-items: start;
}

.logo[b-r38hq65h1q] { grid-area: logo; }
.who[b-r38hq65h1q] { grid-area: who; min-width: 0; }
.when[b-r38hq65h1q] { grid-area: when; }

@container (min-width: 600px) {
    .head[b-r38hq65h1q] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "logo who when";
    }

    .when[b-r38hq65h1q] {
        text-align: right;
    }

    .deadline-line[b-r38hq65h1q] {
        justify-content: flex-end;
    }
}

.deadline-line[b-r38hq65h1q] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.when[b-r38hq65h1q]  .deadline {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.when[b-r38hq65h1q]  .deadline .mud-typography {
    font-weight: 700;
}

/* Two lines of the description, cut where they end. */
.job-row[b-r38hq65h1q]  .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-line;
}

.job-row[b-r38hq65h1q]  .badge {
    margin: 0;
}
/* /Jobs/MarketplaceJobView.razor.rz.scp.css */
/* Below md: head, decision column, body, in that order. From md: the head
   and the body on the left, the decision column beside both. */
.job-sheet[b-mlzr8g35p4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "head"
        "side"
        "body";
    gap: 24px;
}

.job-head[b-mlzr8g35p4] { grid-area: head; }
.job-side[b-mlzr8g35p4] { grid-area: side; }
.job-body[b-mlzr8g35p4] { grid-area: body; min-width: 0; }

@media (min-width: 960px) {
    .job-sheet[b-mlzr8g35p4] {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "head side"
            "body side";
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    /* Under the 68px app bar, with the page's own top margin. Never taller than
       the screen: with an offer read back in it, a sticky column ran past the
       bottom and "Offerte zurückziehen" could not be reached at all. */
    .job-side[b-mlzr8g35p4] {
        position: sticky;
        top: 92px;
        max-height: calc(100dvh - 92px - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (min-width: 1280px) {
    .job-sheet[b-mlzr8g35p4] {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

.offer-drawer[b-mlzr8g35p4] {
    padding: 16px 16px 24px;
    overflow-y: auto;
    height: 100%;
}

.offer-bar-spacer[b-mlzr8g35p4] {
    height: 72px;
}

.offer-bar[b-mlzr8g35p4] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--mud-zindex-appbar);
}
/* /Jobs/MarketplaceMap.razor.rz.scp.css */
.map-actions[b-q5rznis5xr] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px -8px;
}

.group[b-q5rznis5xr] {
    display: flex;
    flex-direction: column;
    padding: 0 8px 12px;
}

/* Name, the selection as a small number, then the count at the far end -- one
   line however much is selected, so the panel never jumps. */
.marketplace-map[b-q5rznis5xr]  .group-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    padding: 0 8px 0 16px;
}

.marketplace-map[b-q5rznis5xr]  .group-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-map[b-q5rznis5xr]  .group-count {
    font-variant-numeric: tabular-nums;
}

.marketplace-map[b-q5rznis5xr]  .selected-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* One row per place. A single quiet "selected" state -- a tint and a filled
   box -- that hover does not darken, so two selected rows always look alike. */
.marketplace-map[b-q5rznis5xr]  .check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 56px 28px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: var(--mud-typography-body2-size);
    text-align: left;
    cursor: pointer;
}

.marketplace-map[b-q5rznis5xr]  .check:hover:not(.selected) {
    background: var(--mud-palette-background);
}

.marketplace-map[b-q5rznis5xr]  .check.selected {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    font-weight: 600;
}

.marketplace-map[b-q5rznis5xr]  .check .box {
    color: var(--mud-palette-text-secondary);
}

.marketplace-map[b-q5rznis5xr]  .check.selected .box {
    color: var(--mud-palette-primary);
}

.marketplace-map[b-q5rznis5xr]  .check.empty:not(.selected) .name,
.marketplace-map[b-q5rznis5xr]  .check.empty:not(.selected) .count {
    color: var(--mud-palette-text-secondary);
}

.marketplace-map[b-q5rznis5xr]  .check .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-map[b-q5rznis5xr]  .check .suffix {
    margin-left: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-caption-size);
    font-weight: 400;
}

/* The count as density: the busiest place fills the track. */
.marketplace-map[b-q5rznis5xr]  .check .bar {
    height: 4px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.marketplace-map[b-q5rznis5xr]  .check .bar > span {
    display: block;
    height: 100%;
    background: var(--mud-palette-primary);
}

.marketplace-map[b-q5rznis5xr]  .check .count {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.marketplace-map[b-q5rznis5xr]  .region-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.marketplace-map[b-q5rznis5xr]  .region-row .check {
    flex: 1 1 auto;
}

.marketplace-map[b-q5rznis5xr]  .places {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

@media (pointer: coarse) {
    .marketplace-map[b-q5rznis5xr]  .check {
        min-height: 44px;
    }
}
/* /Jobs/MarketplaceSearchBar.razor.rz.scp.css */
/* Search takes the room, the selects keep a readable minimum, and the row
   wraps before any gets too narrow for its label. */
.search-bar[b-nlu6t35j2d] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.search-bar[b-nlu6t35j2d]  .search {
    flex: 2 1 260px;
}

.search-bar[b-nlu6t35j2d]  .category {
    flex: 1 1 200px;
}

.search-bar[b-nlu6t35j2d]  .poster {
    flex: 1 1 160px;
}
/* /Jobs/MyJobs.razor.rz.scp.css */
.sort-select[b-u0dxu09f1r] {
    width: 200px;
}
/* /Jobs/OwnJobView.razor.rz.scp.css */
/* Lets the title column shrink instead of forcing the action buttons out of the
   row. Without a basis, flex sizes it from the longest word and the wrap above
   never gets a chance to help. */
.job-title-block[b-zpayh1hfi0] {
    flex: 1 1 16rem;
    min-width: 0;
}
/* /Jobs/PrivateJobWizard.razor.rz.scp.css */
/* The preview card is one MarketplaceJobRow, a list item laid out by the
   width of its nearest container, as in the Auftragssuche. */
.preview[b-7zl7eob4gb] {
    container-type: inline-size;
    margin: 0;
    padding: 0;
}
/* /Jobs/QuickFilter.razor.rz.scp.css */
/* The selected view as one solid state. MudBlazor draws a selected chip as an
   outline plus a 12% tint, which next to the keyboard focus ring read as two
   borders; and a Filled chip, once selected, falls back to its text style.
   The state rules are repeated because MudBlazor re-tints hover, focus and
   active with selectors of their own. */
.quick[b-4z9zng3npw]  .mud-chip.mud-chip-outlined.mud-chip-selected,
.quick[b-4z9zng3npw]  .mud-chip.mud-chip-outlined.mud-chip-selected:hover:not(.mud-disabled),
.quick[b-4z9zng3npw]  .mud-chip.mud-chip-outlined.mud-chip-selected:focus-visible:not(.mud-disabled),
.quick[b-4z9zng3npw]  .mud-chip.mud-chip-outlined.mud-chip-selected:active:not(.mud-disabled) {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
/* /Layout/AppBarIdentity.razor.rz.scp.css */
/* A long company name must ellipsize rather than push the actions off the bar.
   Same shape as NavMenu.razor.css, for the same reason. */
.identity-text[b-vknnjoxjbi] {
    min-width: 0;
    max-width: 16rem;
    overflow: hidden;
}

/* No display declaration here on purpose. MudText already renders a block <p>,
   and setting display would collide with the d-none/d-lg-block that drops the
   e-mail line below lg -- this selector carries a scope attribute and would win
   over anything of MudBlazor's that is not !important. */
.identity-text[b-vknnjoxjbi]  .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
/* /Layout/AppFooter.razor.rz.scp.css */
/* Platform Navy: DESIGN.md's one dark surface, and the two inks that go on it --
   white for the mark and the column headings, Ink On Navy (#D7E2F7, 8.2:1) for
   everything supporting. Written as literals for the same reason the flag band
   is: these are the mark's own values, not theme roles, and must not follow a
   re-theme. */
.app-footer[b-4n4s5hol8o] {
    position: relative;
    margin-top: auto;
    background-color: var(--platform-navy);
    color: var(--ink-on-navy);
}

/* The bar's flag band, from the bar's own declaration -- see --flag-band in
   app.css. Repeated here rather than re-spelled, so the shell's top and bottom
   edge cannot come to carry two different flags.

   The background longhands must match .app-bar::after exactly or the two bands
   stop lining up; app.css carries the reasoning. */
.app-footer[b-4n4s5hol8o]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background-image: var(--flag-band);
    background-size: 100vw 100%;
    background-position: right top;
    background-repeat: no-repeat;
}

.footer-mark[b-4n4s5hol8o] {
    height: 30px;
    width: auto;
}

.footer-wordmark[b-4n4s5hol8o],
.footer-heading[b-4n4s5hol8o] {
    color: #FFFFFF;
}

.footer-body[b-4n4s5hol8o] {
    color: var(--ink-on-navy);
}

/* MudLink renders the anchor itself, so its colour is out of reach without
   ::deep. Color.Inherit on the component keeps MudBlazor from painting these
   Primary -- which on this ground would be navy on navy. */
.app-footer[b-4n4s5hol8o]  a {
    color: var(--ink-on-navy);
    text-decoration: none;
}

.app-footer[b-4n4s5hol8o]  a:hover,
.app-footer[b-4n4s5hol8o]  a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

/* MudDivider's own colour is a light-ground token and disappears here. */
.app-footer[b-4n4s5hol8o]  .footer-rule {
    border-color: rgba(255, 255, 255, 0.16);
}

/* These are standalone navigation targets, not links inside a sentence, so the
   touch minimum applies to them as it does to the buttons in app.css. */
@media (pointer: coarse) {
    .app-footer[b-4n4s5hol8o]  a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The 44px minimum already separates these, so the stack's gap only adds
       height -- 24px per column, where there is least room for it. */
    .app-footer[b-4n4s5hol8o]  .footer-links {
        gap: 0;
    }
}
/* /Layout/AppPageHero.razor.rz.scp.css */
.page-hero[b-7b49m7z0ac] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: var(--sheet-radius);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
    container-type: inline-size;
}

.page-hero img[b-7b49m7z0ac] {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.page-hero-copy[b-7b49m7z0ac] {
    padding: 1.25rem 1.5rem 1.5rem;
}

.page-hero-actions[b-7b49m7z0ac] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.25rem;
}

/* Callers guard their buttons inside Actions (by approval), so the fragment
   is set but may render nothing. */
.page-hero-actions:empty[b-7b49m7z0ac] {
    display: none;
}

/* From here the photograph takes the right half and fades into the white on
   its left edge, so the copy never sits on it. Half the width also means a
   600px category photo is still sharp. */
@container (min-width: 720px) {
    .page-hero img[b-7b49m7z0ac] {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    }

    .page-hero-copy[b-7b49m7z0ac] {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 200px;
        max-width: 58%;
        padding: 2rem 2.5rem;
    }
}
/* /Layout/BrandMark.razor.rz.scp.css */
/* Height only, with the width left to the viewBox: 370:250 is exact at 37x25
   and 74x50 but at no integer pair 30px tall, and pinning both squashed the
   mark by ~1%. Same rule, same reason, in the Keycloak theme's auftragli.css. */
.brand-mark[b-mkjl3x5a01] {
    height: 30px;
    width: auto;
}

/* A vertical MudDivider has no height of its own in a centred flex row -- the
   app bar's toolbar aligns items to the centre rather than stretching them, so
   FlexItem has nothing to stretch to. ::deep because MudDivider renders the
   <hr> itself and child-component markup carries no scope attribute. */
.brand[b-mkjl3x5a01]  .brand-rule {
    height: 28px;
}

.brand-tagline[b-mkjl3x5a01] {
    white-space: nowrap;
}
/* /Layout/EmptyState.razor.rz.scp.css */
.empty-state[b-vmhvvfpil7]  .empty-state-paper {
    border-radius: var(--card-radius);
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Which row you are on, on the edge the eye enters it from.
   MudNavMenu's own Color/Rounded/Margin already give the active row its primary
   icon, label and tint; its Bordered draws the rule with border-inline-end, on
   the far side of the row, which is the one part it cannot express.

   The transparent border on every link is not decoration: added to the active
   one alone, it shifts that row's icon and label three pixels sideways, so the
   whole menu twitches as the selection moves. */
.nav-menu[b-5uxbxh6py6]  .mud-nav-link {
    border-inline-start: 3px solid transparent;
}

.nav-menu[b-5uxbxh6py6]  .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-start-color: var(--mud-palette-primary);
}
/* /Layout/PhotoSheet.razor.rz.scp.css */
/* A container query rather than a media query: inside AppLayout the drawer
   takes 248px of the viewport, and the sheet must split on its own width. */
.photo-sheet[b-emo41pw6a4] {
    max-width: 60rem;
    margin: 2rem auto 0;
    container-type: inline-size;
}

.photo-sheet[b-emo41pw6a4]  .photo-sheet-paper {
    overflow: hidden;
    border-radius: var(--sheet-radius);
}

.photo-sheet-grid[b-emo41pw6a4] {
    display: grid;
    grid-template-columns: 1fr;
}

.photo-sheet-photo img[b-emo41pw6a4] {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: var(--platform-navy);
}

.photo-sheet-content[b-emo41pw6a4] {
    padding: 2rem 1.5rem;
}

@container (min-width: 720px) {
    .photo-sheet-grid[b-emo41pw6a4] {
        grid-template-columns: 5fr 7fr;
        min-height: 26rem;
    }

    /* The photo fills its column however tall the content makes the sheet. */
    .photo-sheet-photo[b-emo41pw6a4] {
        position: relative;
    }

    .photo-sheet-photo img[b-emo41pw6a4] {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .photo-sheet-content[b-emo41pw6a4] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2.5rem 3rem;
    }
}
/* /Pages/Datenschutz.razor.rz.scp.css */
.legal-page[b-xlbu0wy55j] {
    max-width: 68ch;
}
/* /Pages/FreigabeAusstehend.razor.rz.scp.css */
/* The filing read back: ruled rows, label beside value once there is room for
   two columns and stacked when there is not. Same construction and the same
   reason as CompanyProfileEditor.razor.css's .profile-record -- CSS isolation
   is per component, so the rule cannot be shared with it. */
.application-record[b-904wsj7hma] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
}

.application-record dt[b-904wsj7hma] {
    font-size: var(--mud-typography-caption-size);
    line-height: var(--mud-typography-caption-lineheight);
    color: var(--mud-palette-text-secondary);
    margin: 0;
    padding: 0.75rem 0 0;
}

.application-record dd[b-904wsj7hma] {
    margin: 0;
    padding: 0 0 0.75rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--mud-palette-divider);
}

@media (min-width: 600px) {
    .application-record[b-904wsj7hma] {
        grid-template-columns: minmax(9rem, 1fr) 2fr;
        column-gap: 2rem;
    }

    /* The rule belongs to the row, not to the value: on two columns a border on
       dd alone stops halfway across the panel. */
    .application-record dt[b-904wsj7hma] {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .application-record dd[b-904wsj7hma] {
        padding: 0.75rem 0;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Plain elements authored in Home.razor carry this file's scope attribute;
   anything a MudBlazor component renders needs ::deep behind a scoped
   ancestor, or the rule silently matches nothing. */

.hero[b-polfsrdpju] {
    position: relative;
    overflow: hidden;
    border-radius: var(--sheet-radius);
    background-color: var(--mud-palette-secondary);
}

.hero picture[b-polfsrdpju] {
    display: block;
}

.hero img[b-polfsrdpju] {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: 50% 40%;
}

/* Light wash from the top so navy type reads over the sky, as in the mockup. */
.hero-scrim[b-polfsrdpju] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 38%, rgba(255, 255, 255, 0) 65%);
}

.hero-copy[b-polfsrdpju] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem 0;
}

.hero-copy[b-polfsrdpju]  .hero-title {
    color: var(--mud-palette-secondary);
}

.hero-copy[b-polfsrdpju]  .hero-lead {
    color: var(--mud-palette-text-primary);
    max-width: 34rem;
    font-weight: 500;
}

/* The two path cards overlap the hero's lower edge. */
.paths[b-polfsrdpju] {
    position: relative;
    margin-top: -120px;
    padding: 0 1.5rem;
}

.paths[b-polfsrdpju]  .path-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: var(--sheet-radius);
}

/* The photo fills the card's right half and fades into the white behind
   the copy, as in the mockup. */
.paths[b-polfsrdpju]  .path-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    object-fit: cover;
    background-color: #DCE4F0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

.paths[b-polfsrdpju]  .path-content {
    position: relative;
    max-width: 62%;
}

.paths[b-polfsrdpju]  .path-icon {
    font-size: 3rem;
}

@media (min-width: 1200px) {
    .hero img[b-polfsrdpju] {
        height: 480px;
    }

    .paths[b-polfsrdpju] {
        margin-top: -140px;
        padding: 0 3rem;
    }
}

@media (max-width: 899.98px) {
    .hero img[b-polfsrdpju] {
        height: 340px;
    }

    .paths[b-polfsrdpju]  .path-photo {
        width: 45%;
        opacity: 0.35;
    }

    .paths[b-polfsrdpju]  .path-content {
        max-width: none;
    }

    .paths[b-polfsrdpju] {
        margin-top: -60px;
        padding: 0 0.75rem;
    }

}

.hero[b-polfsrdpju]  .hero-credit {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-primary);
    opacity: 0.85;
}
/* /Pages/Impressum.razor.rz.scp.css */
.legal-page[b-lnsxrlvnsn] {
    max-width: 68ch;
}
/* /Pages/Landing/CategoryPhotoTiles.razor.rz.scp.css */
.photo-tiles[b-kf08qzl0zv] {
    display: grid;
    grid-template-columns: repeat(var(--tile-columns, 6), minmax(0, 1fr));
    gap: 1.25rem;
}

/* The name sits on the photo, over a dark fade, so a row of six stays a row of
   pictures rather than six pictures with captions under them. */
.photo-tile[b-kf08qzl0zv] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--card-radius);
    aspect-ratio: 4 / 5;
    background-color: #DCE4F0;
    box-shadow: var(--mud-elevation-2);
    color: #FFFFFF;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.photo-tile[b-kf08qzl0zv]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 60, 0) 45%, rgba(0, 20, 60, 0.78) 100%);
}

.photo-tile img[b-kf08qzl0zv] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* A category without a photo: the icon centred on the tile's own background. */
.photo-tile-icon[b-kf08qzl0zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mud-palette-primary);
}

.photo-tile-name[b-kf08qzl0zv] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}

.photo-tile:hover[b-kf08qzl0zv],
.photo-tile:focus-visible[b-kf08qzl0zv] {
    box-shadow: var(--mud-elevation-8);
    transform: translateY(-3px);
}

.photo-tile:hover img[b-kf08qzl0zv],
.photo-tile:focus-visible img[b-kf08qzl0zv] {
    transform: scale(1.05);
}

@media (max-width: 1199.98px) {
    .photo-tiles[b-kf08qzl0zv] {
        grid-template-columns: repeat(min(var(--tile-columns, 3), 3), minmax(0, 1fr));
    }

    .photo-tile[b-kf08qzl0zv] {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 599.98px) {
    .photo-tiles[b-kf08qzl0zv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    /* A category without a photo: the icon centred on the tile's own background. */
.photo-tile-icon[b-kf08qzl0zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mud-palette-primary);
}

.photo-tile-name[b-kf08qzl0zv] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-tile[b-kf08qzl0zv],
    .photo-tile img[b-kf08qzl0zv] {
        transition: none;
    }

    .photo-tile:hover[b-kf08qzl0zv],
    .photo-tile:focus-visible[b-kf08qzl0zv],
    .photo-tile:hover img[b-kf08qzl0zv],
    .photo-tile:focus-visible img[b-kf08qzl0zv] {
        transform: none;
    }
}
/* /Pages/Landing/ForCompanies.razor.rz.scp.css */
.job-cards[b-1ztt9fe28e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.job-card-link[b-1ztt9fe28e] {
    display: block;
    color: inherit;
    text-decoration: none;
}

.job-card-link[b-1ztt9fe28e]  .job-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--card-radius);
    border-top: 4px solid var(--mud-palette-secondary);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.job-card-link:hover[b-1ztt9fe28e]  .job-card,
.job-card-link:focus-visible[b-1ztt9fe28e]  .job-card {
    box-shadow: var(--mud-elevation-8);
    transform: translateY(-3px);
}

.job-card-link[b-1ztt9fe28e]  .job-title,
.benefits[b-1ztt9fe28e]  .benefit-title {
    font-weight: 600;
}

.job-card-link[b-1ztt9fe28e]  .job-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pushed to the bottom, so the deadlines line up across cards whose titles
   wrap differently. */
.job-card-link[b-1ztt9fe28e]  .job-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.job-card-link[b-1ztt9fe28e]  .job-card > .job-meta {
    margin-bottom: 1.25rem;
}

.benefits[b-1ztt9fe28e]  .benefit-tile {
    height: 100%;
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.benefits[b-1ztt9fe28e]  .benefit-icon {
    font-size: 2.5rem;
}

@media (max-width: 959.98px) {
    .job-cards[b-1ztt9fe28e] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-card-link[b-1ztt9fe28e]  .job-card {
        transition: none;
    }

    .job-card-link:hover[b-1ztt9fe28e]  .job-card,
    .job-card-link:focus-visible[b-1ztt9fe28e]  .job-card {
        transform: none;
    }
}
/* /Pages/Landing/ForPrivateClients.razor.rz.scp.css */
.trust[b-me6fvkngwh]  .trust-band {
    border-radius: var(--card-radius);
    background-color: rgba(0, 43, 127, 0.06);
}
/* /Pages/Landing/LandingCtaBand.razor.rz.scp.css */
.cta-band[b-oiqcyx64xp] {
    position: relative;
    overflow: hidden;
    border-radius: var(--sheet-radius);
    background-color: var(--mud-palette-secondary);
    min-height: 220px;
}

.cta-band img[b-oiqcyx64xp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.cta-scrim[b-oiqcyx64xp] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 36, 110, 0.96) 0%, rgba(0, 36, 110, 0.85) 45%, rgba(0, 36, 110, 0.2) 100%);
}

.cta-copy[b-oiqcyx64xp] {
    position: relative;
    padding: 2rem 2.5rem;
    max-width: 34rem;
}

.cta-copy[b-oiqcyx64xp]  .cta-title {
    color: #FFFFFF;
}

.cta-copy[b-oiqcyx64xp]  .cta-text {
    color: #D7E2F7;
}

.cta-band[b-oiqcyx64xp]  .cta-credit {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    font-size: 0.6875rem;
    color: #FFFFFF;
    opacity: 0.85;
}
/* /Pages/Landing/LandingHero.razor.rz.scp.css */
.landing-hero[b-wawz0gm3az] {
    position: relative;
    overflow: hidden;
    border-radius: var(--sheet-radius);
    background-color: #DCE4F0;
    height: 400px;
}

.landing-hero img[b-wawz0gm3az] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 30%;
}

/* Light wash from the left so navy type reads over the photo; the people sit
   on the right half of every hero photo. */
.landing-hero-scrim[b-wawz0gm3az] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 255, 255, 0) 62%);
}

.landing-hero-copy[b-wawz0gm3az] {
    position: absolute;
    inset: 0;
    padding: 3rem 2.5rem;
    max-width: 36rem;
}

.landing-hero-copy[b-wawz0gm3az]  .landing-hero-title {
    color: var(--mud-palette-secondary);
}

.landing-hero-copy[b-wawz0gm3az]  .landing-hero-lead {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.landing-hero-tools[b-wawz0gm3az] {
    position: relative;
    margin: -124px 2.5rem 0;
    max-width: 44rem;
}

@media (min-width: 1200px) {
    .landing-hero[b-wawz0gm3az] {
        height: 460px;
    }

    .landing-hero-copy[b-wawz0gm3az] {
        padding: 3.5rem 3.5rem;
    }

    .landing-hero-tools[b-wawz0gm3az] {
        margin-left: 3.5rem;
    }
}

@media (max-width: 899.98px) {
    .landing-hero[b-wawz0gm3az] {
        height: 360px;
    }

    .landing-hero-scrim[b-wawz0gm3az] {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 75%);
    }

    .landing-hero-copy[b-wawz0gm3az] {
        padding: 2rem 1.25rem;
    }

    .landing-hero-tools[b-wawz0gm3az] {
        margin: -116px 0.75rem 0;
    }
}
/* /Pages/Landing/LandingSearch.razor.rz.scp.css */
.search-wrap[b-ca3q0xn26y]  .landing-search {
    border-radius: var(--card-radius);
}

.search-wrap[b-ca3q0xn26y]  .landing-search.dark {
    background-color: var(--mud-palette-secondary);
    color: #FFFFFF;
}

.search-input[b-ca3q0xn26y] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0.625rem 0.25rem;
}

.search-wrap[b-ca3q0xn26y]  .landing-search.dark .search-input::placeholder {
    color: #D7E2F7;
}

.search-wrap[b-ca3q0xn26y]  .suggestion {
    background-color: #FFFFFF;
}
/* /Pages/Landing/LandingSteps.razor.rz.scp.css */
.steps[b-bqrjgtkjsp] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem 2.5rem;
    flex-wrap: wrap;
}

.step[b-bqrjgtkjsp] {
    flex: 0 1 260px;
    text-align: center;
}

.step-icon[b-bqrjgtkjsp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(0, 43, 127, 0.08);
}

.step-badge[b-bqrjgtkjsp] {
    position: absolute;
    top: -4px;
    left: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--mud-palette-error);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps[b-bqrjgtkjsp]  .step-arrow {
    margin-top: 24px;
}

@media (max-width: 899.98px) {
    .steps[b-bqrjgtkjsp]  .step-arrow {
        display: none;
    }
}
/* /Pages/RegistrationSheet.razor.rz.scp.css */
.application-sheet[b-3xfdcoym4i] {
    max-width: 64rem;
    margin: 2rem auto;
}

/* Below 900px the sheet already fills most of the viewport height on a real
   phone, so margin: 2rem auto (mobile's existing, working layout) is left
   alone -- confirmed this rule doesn't fire there in the first place. At
   desktop widths the same margin left the sheet stranded near the app bar
   with several hundred px of empty ledger paper below it on anything taller
   than a laptop screen (measured 502px of dead space at 1920x1080), which
   reads as broken rather than restrained. Centering it in the viewport's
   remaining height (100vh minus the 68px app bar and the mt-10/mb-16
   MudContainer margins MarketingLayout applies, see AuftragTheme.cs and
   MarketingLayout.razor) makes the composition read as deliberate instead of
   abandoned. min-height is a floor, not a fixed height, so a viewport
   shorter than the sheet's own content still just grows to fit it -- no
   clipping risk. */
@media (min-width: 900px) {
    .application-sheet[b-3xfdcoym4i] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - 68px - 2.5rem - 4rem);
        margin: 0 auto;
    }
}

/* ::deep throughout: these three classes are passed to MudPaper, MudGrid and
   MudItem, so they land on markup those components render and never carry this
   component's scope attribute. .application-sheet is the plain div authored
   here that anchors the ::deep. */
.application-sheet[b-3xfdcoym4i]  .application-paper {
    overflow: hidden;
    border-radius: var(--sheet-radius);
}

.application-sheet[b-3xfdcoym4i]  .application-grid {
    align-items: stretch;
}

/* One height for both forms, both steps and the confirmation, so switching
   between them does not make the sheet jump: sized for the tallest form
   (private, 709px at 1024px wide) plus a server error above it. Taller content
   still grows the sheet; it is a floor, not a clip. */
@media (min-width: 900px) {
    .application-sheet[b-3xfdcoym4i]  .application-grid {
        min-height: 780px;
    }
}

.application-sheet[b-3xfdcoym4i]  .application-brand-col {
    padding: 0 !important;
}

.application-brand-photo[b-3xfdcoym4i] {
    position: relative;
    height: 100%;
    min-height: 220px;
}

/* ::deep needed to reach the image element the child MudImage component
   renders; see Home.razor.css for why a bare ::deep rule can't be used and
   this needs a literal ancestor (.application-brand-photo, authored
   directly here). */
.application-brand-photo img[b-3xfdcoym4i] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--platform-navy);
}

/* Both photographs keep their people in the right half of the frame. */
.application-brand-photo img.photo-company[b-3xfdcoym4i] {
    object-position: 78% 30%;
}

.application-brand-photo img.photo-private[b-3xfdcoym4i] {
    object-position: 82% 30%;
}

.application-brand-scrim[b-3xfdcoym4i] {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 36, 110, 0.92) 0%, rgba(0, 36, 110, 0.35) 55%, rgba(0, 36, 110, 0.1) 100%);
}

.application-brand-copy[b-3xfdcoym4i] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.75rem;
}

/* ::deep, because both classes are passed to MudText and therefore land on an
   element MudText renders -- which never carries this component's scope
   attribute. Written without it, these two rules had silently never applied:
   the heading inherited TextPrimary and rendered navy-on-navy at 1.33:1 once
   the copy moved onto the solid band. Measured, not inferred. The scoped
   ancestor is .application-brand-copy, a plain div authored in RegistrationSheet.razor;
   see Home.razor.css for why a bare ::deep cannot work here. */
.application-brand-copy[b-3xfdcoym4i]  .application-brand-heading {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

/* DESIGN.md gives the navy band two levels of type, white and this. The credit
   takes the same value and separates by size instead of by a third tone. */
.application-brand-copy[b-3xfdcoym4i]  .application-brand-detail {
    color: var(--ink-on-navy);
}

.application-form-col[b-3xfdcoym4i] {
    padding: 2rem;
}

@media (min-width: 900px) {
    .application-form-col[b-3xfdcoym4i] {
        padding: 2.5rem 3rem;
    }
}

/* Below the two-column breakpoint the copy moves off the photograph and onto a
   solid navy band under it.

   The scrim is a gradient -- nearly opaque at the bottom, nearly clear at the
   top -- which works when the column is full height beside the form. On a
   phone the photo is 200px tall and the copy block 142px, so the heading began
   at 28.5% from the top, where the scrim carries about 0.28 alpha: white type
   over bright sky, measured at roughly 2.5:1 against AA's 4.5:1. No gradient
   tuning fixes that at this size; the text has to leave the image. */
@media (max-width: 899px) {
    /* Once the copy is in flow instead of absolutely positioned, the column can
       no longer be height:100% with an image sized to that height -- the two
       define each other, and the box ends up taller than its grid cell and
       overlaps the form beside it. Height goes on the image instead. */
    .application-brand-photo[b-3xfdcoym4i] {
        height: auto;
        min-height: 0;
    }

    .application-brand-photo img[b-3xfdcoym4i] {
        height: 220px;
    }

    .application-brand-scrim[b-3xfdcoym4i] {
        display: none;
    }

    .application-brand-copy[b-3xfdcoym4i] {
        position: static;
        background-color: var(--platform-navy);
        padding: 1.25rem 1.5rem;
    }
}