html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---------- Public Layout (shared shell) ----------
   Gemeinsamer Header/Footer für alle anonym aufrufbaren Seiten —
   Stellenanzeige, Firmenprofil, perspektivisch weitere. Header in
   derselben CI-Farbe wie der Recruiter-MainLayout (#1976d2 = MUD-
   AppbarBackground), damit alle BewerberTool-Surfaces als eine
   Plattform wirken. Footer bleibt neutral.

   Die `--firma-*`-Custom-Properties (von der Firmenprofil-Page genutzt)
   liegen am Shell, damit beide Public-Pages auf denselben Werten
   arbeiten und sich die Palette an einer Stelle pflegen lässt. */

.public-layout-shell {
    --firma-blue: #1e5fbf;
    --firma-blue-hover: #143f80;
    --firma-blue-tint: #eef3fa;
    --firma-heading: #1f2a3a;
    --firma-body: #3a4956;
    --firma-secondary: #6b7a8a;
    --firma-border: #ececec;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: var(--firma-body);
}
.public-layout-header {
    background-color: #1976d2;
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.public-layout-main {
    flex: 1 0 auto;
    padding: 3rem 0 5rem;
}
.public-layout-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--firma-border);
    background-color: #fafafa;
    color: var(--firma-secondary);
}

/* ---------- Public Job Page ----------
   Bewusst neutrale, redaktionelle Anmutung — komplett weiß, dezente
   Trennlinien, Typografie trägt die Hierarchie. Kein Tool-CI-Farb-
   Akzent, damit später eingebrachte Tenant-CI nicht damit kollidiert.
   Orientierung: karrierebörse-Stil. */

/* Headline-Block: Tenant in dezenter Caption, dann großer Titel,
   darunter eine Pillen-Reihe mit Schnell-Facts (Beschäftigung/Modell/
   Standort) — outlined, neutral grau, kein Farb-Akzent. */
.public-job-header-block {
    margin-bottom: 1.5rem;
}
.public-job-tenant-line {
    font-size: 0.875rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.public-job-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.public-job-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.public-job-pills li {
    font-size: 0.875rem;
    color: #4a4a4a;
    background-color: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    padding: 0.25rem 0.875rem;
}

.public-job-divider {
    border: none;
    border-top: 1px solid #ececec;
    margin: 2rem 0;
}

.public-job-empty {
    color: #888;
    font-style: italic;
}

/* Content-Bereich — die HTML-Beschreibung kommt hier ungerahmt rein,
   großzügige Zeilenhöhe, Headlines dunkel und kräftig. */
.public-job-content {
    line-height: 1.7;
    font-size: 1.0625rem;
    color: #2a2a2a;
}
.public-job-content h1,
.public-job-content h2,
.public-job-content h3,
.public-job-content h4 {
    color: #1a1a1a;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.public-job-content h1 { font-size: 1.75rem; }
.public-job-content h2 { font-size: 1.4rem; }
.public-job-content h3 { font-size: 1.2rem; }
.public-job-content h4 { font-size: 1.05rem; }
.public-job-content p {
    margin: 0 0 1em;
}
.public-job-content ul,
.public-job-content ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.public-job-content li {
    margin-bottom: 0.4em;
}
.public-job-content a {
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-job-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Sidebar — kein Card-Frame, nur ein dezenter linker Trenner.
   Sticky, damit der Bewerben-CTA beim Scrollen sichtbar bleibt. */
.public-job-aside {
    position: sticky;
    top: 5rem;
    padding: 0 0 0 1.5rem;
    border-left: 1px solid #ececec;
}
.public-job-aside-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.75rem 0 0.75rem;
}
.public-job-aside-heading:first-child {
    margin-top: 0;
}
.public-job-facts {
    margin: 0;
    padding: 0;
}

.public-job-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ececec;
}
.public-job-apply {
    display: block;
    text-align: center;
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.public-job-apply:hover,
.public-job-apply:focus {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}
.public-job-cta-note {
    font-size: 0.8125rem;
    color: #888;
    text-align: center;
    margin: 0.75rem 0 0;
}
.public-job-deadline-passed {
    background-color: #fdf6e3;
    border: 1px solid #ecd9a3;
    color: #6b5a1f;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}

/* Mobile: Sidebar nicht-sticky, kein linker Border (ist jetzt oberer). */
@media (max-width: 960px) {
    .public-job-aside {
        position: static;
        padding: 2rem 0 0;
        border-left: none;
        border-top: 1px solid #ececec;
        margin-top: 1rem;
    }
    .public-job-title {
        font-size: 1.75rem;
    }
}

/* ---------- Public Firmenprofil ----------
   Karrierebörsen-Stil: weiß, dezente Trenner, Typografie führt.
   Palette bewusst aus zwei Tönen — Blau für Klickbares (Job-Titel,
   Adress-/Website-Links, Brand) und ein wärmlicher Blau-Grau für
   Body und Sekundär-Text. Hero zentriert mit Logo statt left-aligned
   mit Pillen, damit Besucher Firmenprofil von Stellenanzeige
   optisch sofort unterscheiden. */

/* Zentrierter Hero. Logo-Quadrat 120px, Initialen-Fallback grau. */
.public-firma-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}
.public-firma-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.25rem;
    border: 1px solid var(--firma-border);
    border-radius: 8px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.public-firma-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.public-firma-logo-fallback {
    font-size: 3rem;
    font-weight: 700;
    color: var(--firma-secondary);
}
.public-firma-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--firma-heading);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.public-firma-subline {
    font-size: 0.95rem;
    color: var(--firma-secondary);
    margin: 0;
}

.public-firma-divider {
    border: none;
    border-top: 1px solid var(--firma-border);
    margin: 2rem 0;
}

.public-firma-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--firma-heading);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.public-firma-empty {
    color: var(--firma-secondary);
    font-style: italic;
}

.public-firma-text {
    line-height: 1.7;
    font-size: 1rem;
    color: var(--firma-body);
    /* pre-wrap erhält Zeilenumbrüche aus dem Plain-Text-Editor, ohne
       horizontal scrollbar zu erzeugen. */
    white-space: pre-wrap;
    margin: 0 0 1.5rem;
}

/* Fact-Block: Label fett, Wert darunter. */
.public-firma-fact-block {
    margin: 1.25rem 0;
}
.public-firma-fact-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--firma-heading);
    margin: 0 0 0.25rem;
}
.public-firma-fact-value {
    font-size: 1rem;
    color: var(--firma-body);
    margin: 0;
}

/* Sidebar — Klon der .public-job-aside-Optik, gleicher linker Trenner. */
.public-firma-aside {
    position: sticky;
    top: 5rem;
    padding: 0 0 0 1.5rem;
    border-left: 1px solid var(--firma-border);
}
.public-firma-aside-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--firma-heading);
    margin: 0 0 0.75rem;
}
.public-firma-address {
    font-size: 0.95rem;
    color: var(--firma-body);
    line-height: 1.5;
    margin: 0 0 1rem;
}
.public-firma-route-link,
.public-firma-website a {
    color: var(--firma-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-firma-route-link:hover,
.public-firma-website a:hover {
    color: var(--firma-blue-hover);
}
.public-firma-website {
    margin: 0;
    font-size: 0.95rem;
}

/* Stellen-Liste unten — jede Karte ist als Block-Link klickbar. */
.public-firma-jobs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.public-firma-job {
    border-bottom: 1px solid var(--firma-border);
}
.public-firma-job:last-child {
    border-bottom: none;
}

/* Card-Wrapper: <a> wird als Block dargestellt, color:inherit damit
   Meta/Pills ihre eigenen Farben behalten. Der Titel innen bekommt
   die Link-Färbung. Hover/Focus tönen subtil den Hintergrund —
   Affordance, dass die ganze Karte klickbar ist. */
.public-firma-job-link {
    display: block;
    padding: 1rem 0.75rem 1.25rem;
    margin: 0 -0.75rem;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}
.public-firma-job-link:hover,
.public-firma-job-link:focus-visible {
    background-color: var(--firma-blue-tint);
    outline: none;
}
.public-firma-job-link:hover .public-firma-job-title,
.public-firma-job-link:focus-visible .public-firma-job-title {
    color: var(--firma-blue-hover);
    text-decoration: underline;
}
/* Fallback ohne Link: gleiche Box-Optik, aber kein Hover-Effekt und
   Titel in Heading-Farbe statt Blau (signalisiert: kein Ziel). */
.public-firma-job-link--inactive {
    cursor: default;
}
.public-firma-job-link--inactive .public-firma-job-title {
    color: var(--firma-heading);
}

.public-firma-job-title {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--firma-blue);
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.public-firma-job-meta {
    font-size: 0.875rem;
    color: var(--firma-body);
    margin: 0;
}
.public-firma-job-meta-secondary {
    font-size: 0.8125rem;
    color: var(--firma-secondary);
    margin: 0 0 0.5rem;
}
.public-firma-job-pills {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}
.public-firma-job-pills li {
    font-size: 0.8125rem;
    color: var(--firma-body);
    background-color: #eef2f7;
    border: 1px solid #dde4ec;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

/* Recruiter-Edit-Page: Logo-Vorschau-Box. */
.firma-edit-logo {
    width: 120px;
    height: 120px;
    border: 1px solid #ececec;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #fafafa;
}

@media (max-width: 960px) {
    .public-firma-aside {
        position: static;
        padding: 2rem 0 0;
        border-left: none;
        border-top: 1px solid #ececec;
        margin-top: 1rem;
    }
    .public-firma-title {
        font-size: 1.75rem;
    }
}