@charset "utf-8";

/* Im ganzen Vermittlerportal gibt es nur eine Schriftart: Neue Haas Unica Pro. Es ändern sich nur Größe und Stärke.
   --font__highlight (Überschriften, Buttons, Labels, Navigation) verweist in abschlussstrecke.css auf PP Neue Corp Compact. */
html {
    --font__highlight: 700 1.125rem/1.5 "Neue Haas Unica Pro", sans-serif;
}

/*
 * Vermittlerportal - zentrale Styles für die Neuentwicklung des Extranets (ohne Ext JS)
 *
 * Basis: Extranet/Abschlussstrecke/css/abschlussstrecke.css (Farben, Schriften, Buttons, Formularfelder).
 * Diese Datei muss NACH abschlussstrecke.css eingebunden werden und ergänzt nur das, was dort fehlt.
 *
 * Konventionen:
 *  - portal-*  seitenübergreifende Bausteine (Header, Seitenrahmen, Karte, Meldungen, Hinweisbox, Link-Button)
 *  - login-*   nur für Views/Extranet/Login.aspx
 *  - neue Seiten bekommen einen eigenen Abschnitt mit eigenem Präfix (z. B. home-*, request-*)
 *  - BEM (block__element--modifier), Farben und Abstände nur über die Variablen aus abschlussstrecke.css
 *  - kein Inline-<style> in den Views
 */

/* ==========================================================================
   Portal: Header und Seitenrahmen
   ========================================================================== */

/* Kopfbereich des Vermittlerportals: durchgehende Midnight-Leiste mit Logo und weißem Titel;
   darunter die graue Leiste mit Datenschutz, Impressum und Hilfe (Zitronengelb) rechts */
.portal-header__title {
    color: #fff;
    font: var(--font__bold);
    font-size: 1.125rem;
    padding-inline: 1.5rem;
}

.portal-header__nav {
    align-items: stretch;
    background-color: var(--color__gray-1);
    display: flex;
    height: 45px;
    inset-block-start: 5rem;
    inset-inline: 0;
    justify-content: flex-end;
    position: fixed;
    z-index: 2;
}

.portal-header__link {
    align-items: center;
    color: var(--color__midnight);
    display: flex;
    font: var(--font__regular);
    font-size: .95rem;
    padding-inline: 1.75rem;
    text-decoration: none;
}

    .portal-header__link:hover,
    .portal-header__link:focus-visible {
        background-color: var(--color__lemon);
    }

/* Hilfe: zitronengelber Eintrag am rechten Rand der Leiste, das Panel öffnet sich unterhalb der Leiste */
.portal-header__nav .sales-form-help {
    margin-inline-start: 0;
    min-width: 0;
}

/* Hilfe-Eintrag: gleiche Höhe und Schrift wie die Navigation im Portal, nur das Symbol zum Schließen beim geöffneten Panel */
.portal-header__help {
    align-items: center;
    background-color: var(--color__lemon);
    box-sizing: border-box;
    color: var(--color__midnight);
    cursor: pointer;
    display: flex;
    font: var(--font__bold);
    font-size: .95rem;
    gap: .5rem;
    height: 45px;
    list-style: none;
    padding-inline: 1.75rem;
}

    .portal-header__help::-webkit-details-marker {
        display: none;
    }

    .portal-header__help:hover {
        background-color: var(--color__lemon--interaction);
    }

    .portal-header__help svg {
        height: 1rem;
        width: 1rem;
    }

    .portal-header__help .sales-form-help__icon--is-closed {
        display: none;
    }

/* Datenschutz und Impressum nebeneinander */
.portal-header__nav .sales-form-legal {
    align-self: stretch;
    display: flex;
    flex-direction: row;
}

/* Kein reservierter Platz für die Bildlaufleiste (sonst bleibt rechts neben den festen Leisten ein freier Streifen) */
html {
    scrollbar-gutter: auto;
}

.portal-header__nav .sales-form-help__inner {
    background-color: var(--color__lemon) !important;
    inset-block-start: calc(5rem + 45px);
}

/* ==========================================================================
   Portal: Seitenrahmen und Karte
   ========================================================================== */

/* Inhalt: zentrierte Karte unterhalb des Headers (5rem + Leiste 45 px), Hinweisbox darunter */
.portal-page {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 46rem;
    width: 100%;   /* body ist ein Flex-Container, ohne Breite würde die Karte auf Inhaltsbreite schrumpfen */
    padding: calc(5rem + 45px + 4rem) var(--space__fluid-edge) 4rem;
}

.portal-card {
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
    padding: 3rem;
}

@media (max-width: 480px) {
    .portal-card {
        padding: 1.5rem;
    }
}

.portal-card .form__fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

/* Einleitungstexte: keine Breitenbegrenzung (p hat global 70ch) und keine Silbentrennung, damit sie nicht umbrechen */
.portal-card .form__fieldset-description {
    hyphens: none;
    max-width: none;
}

.portal-card .form__group--actions {
    margin-block-start: 1.5rem;
}

/* ==========================================================================
   Portal: Link-Button
   ========================================================================== */

/* Schaltfläche, die wie ein Link aussieht (Aktion per POST wegen AntiForgeryToken) */
.portal-link {
    background: none;
    border: 0;
    color: var(--color__midnight);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

    .portal-link:hover,
    .portal-link:focus-visible {
        color: var(--color__royal-blue);
    }

/* ==========================================================================
   Portal: Hinweisbox, Meldungen, Sicherheitshinweis
   ========================================================================== */

/* Hinweisbox (Beispiel: "Noch keinen Zugang?") unterhalb der Karte */
.portal-info {
    align-items: flex-start;
    background-color: color-mix(in srgb, var(--color__sky) 25%, white);
    border: 1px solid var(--color__royal-blue);
    color: var(--color__midnight);
    display: flex;
    gap: 1rem;
    margin-block-start: 2rem;
    padding: 1.25rem;
}

.portal-info__icon {
    color: var(--color__royal-blue);
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.portal-info p {
    hyphens: none;
    margin: 0;
    max-width: none;
}

/* Hervorgehobene Meldungen (Fehler / Erfolg) */
.portal-message {
    align-items: center;
    border-inline-start: 6px solid;
    display: flex;
    font: var(--font__bold);
    gap: 1rem;
    margin-block: 1rem;
    padding: 1rem 1.25rem;
}

.portal-message__icon {
    flex-shrink: 0;
    height: 1.75rem;
    width: 1.75rem;
}

.portal-message--success {
    background-color: var(--color__olive);
    border-color: var(--color__midnight);
    color: var(--color__midnight);
}

.portal-message--error {
    background-color: color-mix(in srgb, var(--color__error) 12%, white);
    border-color: var(--color__error);
    color: var(--color__error);
}

/* SSL-Hinweis: unterhalb der Karte, nicht mehr fixiert */
.portal-secure {
    align-items: center;
    color: var(--color__midnight);
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-block-start: 1.5rem;
}

.portal-secure__icon {
    color: var(--color__royal-blue);
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.portal-secure__text {
    font: var(--font__regular);
    font-size: .95rem;
    hyphens: none;
    margin: 0;
    max-width: none;   /* p hat global max-width: 70ch */
    text-align: center;
    text-wrap: balance;
}

/* ==========================================================================
   Portal: Kopfzeile mit Benutzer und Standort, Tabs
   ========================================================================== */

:root {
    /* Zusatzfarben für Status (nicht in abschlussstrecke.css enthalten) */
    --portal-color__warning: oklch(0.5 0.12 60);
    --portal-color__warning-bg: oklch(0.96 0.04 75);
    --portal-color__warning-border: oklch(0.72 0.14 65);
    --portal-color__info-bg: color-mix(in srgb, var(--color__sky) 25%, white);
}

/* Seitenhintergrund wie im Entwurf: helles Grau (Off-White), Karten und Tabellen bleiben weiß */
body.sales-form-container,
html:has(body.sales-form-container) {
    background-color: var(--color__off-white);
}

/* Das hidden-Attribut muss auch bei Elementen mit eigenem display (grid, flex) gelten */
[hidden] {
    display: none !important;
}

.portal-header__user {
    align-items: center;
    color: var(--color__white);
    display: flex;
    gap: 1.5rem;
    margin-inline-start: auto;
    padding-inline: 1.5rem;
}

.portal-header__user-info {
    display: grid;
    font-size: .9rem;
    line-height: 1.3;
}

.portal-header__user-name {
    font: var(--font__bold);
    font-size: .9rem;
}

.portal-header__logout {
    color: var(--color__white);
    font: var(--font__bold);
    font-size: .9rem;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .portal-header__user-info {
        display: none;
    }
}

.portal-location {
    position: relative;
}

.portal-location__toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color__royal-blue);
    color: var(--color__white);
    cursor: pointer;
    display: flex;
    font: var(--font__bold);
    font-size: .9rem;
    gap: .5rem;
    padding: .65rem 1rem;
    text-decoration: none;
}

    .portal-location__toggle:hover,
    .portal-location__toggle:focus-visible {
        background-color: var(--color__midnight--interaction);
        color: var(--color__white);
    }

.portal-location__icon {
    height: 1.1rem;
    width: 1.1rem;
}

/* Eigene Schaltflächen im Portal: ohne die Versalien, die Füllfläche beim Überfahren und das große Padding der globalen button-Regel */
.portal-location__toggle,
.portal-step__toggle,
.portal-link {
    isolation: auto;
    letter-spacing: normal;
    overflow: visible;
    text-transform: none;
}

    .portal-location__toggle::before,
    .portal-step__toggle::before,
    .portal-link::before {
        display: none !important;
    }

/* abschlussstrecke.css färbt jeden button über button:not(.background, .anchor) lemon; gleiche Spezifität, später eingebunden */
button.portal-location__toggle:not(.background, .anchor),
button.portal-step__toggle:not(.background, .anchor),
button.portal-link:not(.background, .anchor) {
    background-color: transparent;
}

button.portal-location__toggle:not(.background, .anchor):hover,
button.portal-location__toggle:not(.background, .anchor):focus-visible {
    background-color: var(--color__midnight--interaction);
}

button.portal-step__toggle:not(.background, .anchor):hover:not(:disabled) {
    background-color: var(--color__off-white);
}

.portal-dialog.portal-dialog--narrow {
    max-width: none;
    width: 60%;
}
/* Tabs links in der grauen Leiste */
.portal-tabs {
    display: flex;
    margin-inline-end: auto;
    padding-inline-start: 1rem;
}

.portal-tabs__link {
    align-items: center;
    border-block-end: 3px solid transparent;
    box-sizing: border-box;
    color: var(--color__midnight);
    display: flex;
    font-size: .95rem;
    padding-inline: 1.25rem;
    text-decoration: none;
}

    .portal-tabs__link:hover,
    .portal-tabs__link:focus-visible {
        background-color: var(--color__gray-2);
    }

.portal-tabs__link--active {
    border-color: var(--color__royal-blue);
    font: var(--font__bold);
    font-size: .95rem;
}

/* ==========================================================================
   Portal: Seitenbreite, Einleitung, Zurück-Link, Zustände
   ========================================================================== */

.portal-page--wide {
    max-width: 84rem;
}

.portal-intro {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    justify-content: space-between;
    margin-block-end: 2rem;
}

.portal-intro__text {
    hyphens: none;
    margin-block-end: 0;
    max-width: none;
}

.portal-back {
    align-items: center;
    color: var(--color__midnight);
    display: inline-flex;
    gap: .35rem;
    margin-block-end: 1.5rem;
}

    .portal-back svg {
        height: 1.25rem;
        transform: rotate(90deg);
        width: 1.25rem;
    }

.portal-state {
    color: var(--color__midnight);
    margin-block: 2rem;
    max-width: none;
}

.portal-actions {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 2rem;
}

/* ==========================================================================
   Portal: Startseite (Kacheln, Liste, Seitenleiste)
   ========================================================================== */

.portal-tiles {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-block-end: 2.5rem;
}

.portal-tile {
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
    display: grid;
    gap: .35rem;
    padding: 1.5rem;
}

.portal-tile__count {
    font-family: "Neue Haas Unica Pro", sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.portal-tile__title {
    font-size: 1.15rem;
}

.portal-tile--warning {
    background-color: var(--portal-color__warning-bg);
    border-color: var(--portal-color__warning-border);
    color: var(--portal-color__warning);
}

.portal-tile--info {
    background-color: var(--portal-color__info-bg);
    border-color: var(--color__royal-blue);
}

.portal-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 22rem;
}

@media (max-width: 1000px) {
    .portal-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.portal-list-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    margin-block-end: 1rem;
}

.portal-search {
    display: grid;
    gap: .35rem;
    min-width: min(100%, 22rem);
}

.portal-table-wrap {
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
    overflow-x: auto;
}

.portal-table {
    border-collapse: collapse;
    width: 100%;
}

    .portal-table th,
    .portal-table td {
        border-block-end: 1px solid var(--color__gray-2);
        padding: 1rem 1.25rem;
        text-align: start;
        vertical-align: middle;
    }

    .portal-table thead th {
        background-color: var(--portal-color__info-bg);
        font: var(--font__bold);
        font-size: .95rem;
    }

    .portal-table tbody tr:last-child th,
    .portal-table tbody tr:last-child td {
        border-block-end: 0;
    }

.portal-table__name {
    font: var(--font__bold);
}

.portal-table__actions {
    text-align: end;
    white-space: nowrap;
}

.portal-table__button {
    border: 2px solid var(--color__midnight);
    color: var(--color__midnight);
    display: inline-block;
    font: var(--font__bold);
    padding: .75rem 1.25rem;
    text-decoration: none;
}

    .portal-table__button:hover,
    .portal-table__button:focus-visible {
        background-color: var(--color__lemon);
    }

.portal-table__link {
    color: var(--color__midnight);
    font: var(--font__bold);
}

/* Status-Badges */
.portal-badge {
    border: 1px solid var(--color__gray-2);
    display: inline-block;
    font: var(--font__bold);
    font-size: .9rem;
    padding: .25rem .65rem;
    white-space: nowrap;
}

.portal-badge--warning {
    background-color: var(--portal-color__warning-bg);
    border-color: var(--portal-color__warning-border);
    color: var(--portal-color__warning);
}

.portal-badge--draft {
    background-color: var(--color__gray-1);
}

.portal-badge--review {
    background-color: var(--portal-color__info-bg);
    border-color: var(--color__royal-blue);
}

.portal-badge--done,
.portal-badge--online {
    background-color: color-mix(in srgb, var(--color__olive) 35%, white);
    border-color: var(--color__olive);
}

.portal-badge--closed {
    background-color: var(--color__white);
}

/* Entwicklerschalter (nur LOCAL/INT/TEST): Antragsweg ist anklickbar */
.portal-badge--dev {
    cursor: pointer;
}

    .portal-badge--dev:hover,
    .portal-badge--dev:focus-visible {
        box-shadow: inset 0 0 0 1px var(--color__midnight);
    }

/* Seitenleiste "Ihr Underwriting" */
.portal-aside {
    background-color: var(--color__midnight);
    color: var(--color__white);
    padding: 2rem;
}

    .portal-aside a {
        color: var(--color__lemon);
    }

    .portal-aside p {
        hyphens: none;
        max-width: none;
    }

.portal-aside__contact {
    margin-block-end: 0;
}

/* Leerer Zustand und Schritte */
.portal-empty {
    align-items: flex-start;
    border-block-end: 1px solid var(--color__gray-2);
    display: flex;
    gap: 1.5rem;
    margin-block-end: 2rem;
    padding-block-end: 2rem;
}

.portal-empty__icon {
    align-items: center;
    background-color: var(--portal-color__info-bg);
    border-radius: 50%;
    color: var(--color__royal-blue);
    display: flex;
    flex-shrink: 0;
    height: 4rem;
    justify-content: center;
    width: 4rem;
}

    .portal-empty__icon svg {
        height: 1.75rem;
        width: 1.75rem;
    }

.portal-empty__title {
    font: var(--font__bold);
    font-size: 1.5rem;
    margin-block-end: .5rem;
}

.portal-empty p {
    hyphens: none;
    margin-block-end: 0;
    max-width: none;
}

.portal-steps__title {
    font: var(--font__bold);
    font-size: 1.25rem;
    margin-block-end: 1.25rem;
}

.portal-steps {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.portal-steps__item {
    display: grid;
    gap: .5rem;
}

.portal-steps__number {
    align-items: center;
    border: 2px solid var(--color__royal-blue);
    border-radius: 50%;
    display: flex;
    font: var(--font__bold);
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

/* ==========================================================================
   Portal: Auswahllisten (Standort) und Produktkarten (Neuer Antrag)
   ========================================================================== */

.portal-choices {
    display: grid;
    gap: 1rem;
}

.portal-choice {
    align-items: center;
    background-color: var(--color__white);
    border: 2px solid var(--color__gray-2);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

    .portal-choice:has(.portal-choice__input:checked) {
        background-color: var(--portal-color__info-bg);
        border-color: var(--color__royal-blue);
    }

    .portal-choice:has(.portal-choice__input:focus-visible) {
        outline: 3px solid var(--color__royal-blue);
        outline-offset: 2px;
    }

.portal-choice__text {
    display: grid;
    gap: .15rem;
}

.portal-choice__title {
    font: var(--font__bold);
    font-size: 1.15rem;
}

.portal-products {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.portal-product {
    align-items: flex-start;
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
    display: grid;
    gap: 1rem;
    justify-items: start;
    padding: 2rem;
}

.portal-product__title {
    margin: 0;
}

.portal-product__text {
    hyphens: none;
    margin: 0;
    max-width: none;
}

/* Produktauswahl wie im Demo-Entwurf: schmalerer Inhaltsbereich, Karten mit 2 px Midnight-Rahmen, Titel in Midnight */
.portal-page--wide.portal-page--products {
    max-width: 76rem;
}

.portal-page--products .portal-products {
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.portal-page--products .portal-product {
    border: 2px solid var(--color__midnight);
    gap: 1.25rem;
    padding: 2rem;
}

    .portal-page--products .portal-product:hover {
        box-shadow: inset 0 0 0 1px var(--color__midnight);
    }

.portal-page--products .portal-product__title {
    color: var(--color__midnight);
    font-size: 2.2857rem;   /* 32 px bei 14 px Basisschrift */
    line-height: 1.12;
}

/* Teaser (noch nicht verfügbar): dünner grauer Rahmen statt Midnight, ausgegraute Schaltfläche */
.portal-page--products .portal-product--disabled {
    border: 1px solid var(--color__gray-2);
}

    .portal-page--products .portal-product--disabled:hover {
        box-shadow: none;
    }

.portal-product--disabled .button:disabled {
    background-color: var(--color__gray-1);
    color: color-mix(in srgb, var(--color__midnight) 60%, white);
    cursor: not-allowed;
}

    .portal-product--disabled .button:disabled::before {
        display: none;
    }

.portal-page--products .portal-product__text {
    font-size: 1.0714rem;
    line-height: 1.45;
}
/* ==========================================================================
   Portal: Antragsassistent (Views/Extranet/Application.aspx)
   ========================================================================== */

.portal-layout--steps {
    grid-template-columns: minmax(0, 1fr) 24rem;
}

@media (max-width: 1000px) {
    .portal-layout--steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

.portal-steps-list {
    display: grid;
    gap: 1rem;
}

.portal-step {
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
}

.portal-step[data-state="active"] {
    border-inline-start: 5px solid var(--color__royal-blue);
}

.portal-step__head {
    margin: 0;
}

.portal-step__toggle {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color__midnight);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: start;
    width: 100%;
}

    .portal-step__toggle:disabled {
        color: color-mix(in srgb, var(--color__midnight) 55%, white);
        cursor: not-allowed;
    }

    .portal-step__toggle:focus-visible {
        outline: 3px solid var(--color__royal-blue);
        outline-offset: -3px;
    }

.portal-step__badge {
    align-items: center;
    border: 2px solid var(--color__royal-blue);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    font: var(--font__bold);
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.portal-step[data-state="done"] .portal-step__badge {
    background-color: color-mix(in srgb, var(--color__olive) 40%, white);
    border-color: var(--color__olive);
    color: var(--color__midnight);
}

.portal-step__title {
    flex: 1;
    font-family: "Neue Haas Unica Pro", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-step__state {
    color: var(--portal-color__text-hint, inherit);
    font: var(--font__bold);   /* Neue Haas Unica statt der engen Überschriftenschrift des Buttons */
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

.portal-step[data-state="done"] .portal-step__state {
    color: var(--color__midnight);
}

.portal-step__chevron {
    height: 1.5rem;
    transition: transform .15s;
    width: 1.5rem;
}

.portal-step__toggle[aria-expanded="true"] .portal-step__chevron {
    transform: rotate(180deg);
}

.portal-step__body {
    padding: 0 1.5rem 1.75rem 4.5rem;
}

@media (max-width: 600px) {
    .portal-step__body {
        padding-inline-start: 1.5rem;
    }
}

.portal-step__nav {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-block-start: 1.5rem;
}

.portal-step__nav--end {
    justify-content: flex-end;
}

.portal-subtitle {
    color: var(--color__royal-blue);
    font: var(--font__bold);
    font-size: 1.25rem;
    margin-block: 1.75rem .75rem;
}

.portal-hint {
    hyphens: none;
    max-width: none;
}

.portal-facts {
    display: grid;
    gap: 1.25rem 3rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 0 0 1rem;
}

    .portal-facts dt {
        font-size: .9rem;
        opacity: .75;
    }

    .portal-facts dd {
        margin: 0;
    }

.portal-facts--compact {
    gap: .9rem;
    grid-template-columns: 1fr;
}

.portal-facts__multiline {
    white-space: pre-line;
}

.portal-facts__strong {
    font: var(--font__bold);
}

.portal-facts__big {
    font-family: "Neue Haas Unica Pro", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.portal-fields {
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.portal-field-hint {
    display: block;
    font-size: .85rem;
    margin-block-start: .35rem;
    opacity: .8;
}

/* Checkbox nicht von langem Text zusammendrücken lassen (sonst wird sie schmal statt quadratisch) */
.portal-check input[type="checkbox"] {
    aspect-ratio: 1;
    border-radius: .25rem;   /* leicht abgerundete Ecken wie im Demo-Entwurf */
    flex: none;
    height: 1.4286rem;   /* 20 px bei 14 px Basisschrift, wie im Demo-Entwurf */
    margin-block-start: .1rem;
    transform: none;
    width: 1.4286rem;
}

.portal-check {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: .75rem;
    margin-block-end: 1rem;
}

.portal-message--info {
    background-color: var(--portal-color__info-bg);
    border-color: var(--color__royal-blue);
    color: var(--color__midnight);
}

.portal-question {
    border: 0;
    border-block-end: 1px solid var(--color__gray-2);
    margin: 0;
    padding: 1.25rem 0;
}

.portal-question__text {
    float: left;
    font: var(--font__regular);   /* Fließschrift wie der Hinweistext über den Fragen */
    font-size: 1.1429rem;
    margin-block-end: .75rem;
    padding: 0;
    width: 100%;
}

.portal-question__help {
    clear: both;
    margin-block-end: .75rem;
}

.portal-question__answers {
    clear: both;
    display: flex;
    gap: 1rem;
}

.portal-choice--compact {
    padding: .6rem 1.25rem;
}

/* Abstand zwischen Versicherungssummen und Schaltfläche "Prämienübersicht als PDF" */
.portal-page [data-overview] {
    display: grid;
    gap: .9rem;
    justify-items: start;
    margin-block: 1.75rem 2.25rem;
}

.portal-page [data-overview] .portal-hint {
    margin: 0;
}

.portal-page [data-overview] .button {
    padding: 1.1rem 1.75rem;
}

/* Texte optisch mittig in Flächen: Die Schriften haben oben und unten unterschiedlich viel Leerraum im Zeilenkasten.
   text-box schneidet ihn auf Versalienhöhe bis Grundlinie ab (wie abschlussstrecke.css es für .button__label tut). */
.portal-badge,
.portal-sum__amount,
.portal-sum__label,
.portal-sum__value,
.portal-summary__row > span:first-child,
.portal-step__state,
.portal-choice__title,
.portal-choice__detail {
    text-box: trim-both cap alphabetic;
}

.portal-badge {
    line-height: 1.2;
    padding-block: .45rem;
}

.portal-sum__price {
    gap: .65rem;   /* Abstand zwischen Beschriftung und Betrag (text-box schneidet den Zeilenleerraum ab) */
}

/* abschlussstrecke.css schiebt jeden Radiobutton per translate: 0 -.265em nach oben (für die Formulare der Homepage).
   Im Portal sitzen Radiobuttons in Flächen (Summen, Ja/Nein, Standort) und werden dort vertikal zentriert. */
.portal-page input[type="radio"],
.portal-dialog input[type="radio"] {
    translate: none;
}

.portal-sums .portal-sum__input {
    align-self: center;
}

/* Beschriftungen der Felder im Antragsassistenten (z. B. Vertragsbeginn): Neue Haas Unica fett, Normalschreibweise statt Versalien */
.portal-layout--steps .form__group > label {
    font: var(--font__bold);
    font-size: 1.0714rem;
    letter-spacing: normal;
    text-transform: none;
}

/* Schaltflächen im Antragsassistenten: Schrift wie die Hinweisbox darunter (Neue Haas Unica fett, Normalschreibweise)
   statt der engen Überschriftenschrift in Versalien */
.portal-layout--steps .button,
.portal-layout--steps .button .button__label {
    font: var(--font__bold);
    font-size: 1.0714rem;
    letter-spacing: normal;
    text-transform: none;
}

.portal-table__strong {
    font: var(--font__bold);
}

/* Versicherungssummen als Liste von Auswahlflächen: Radiobutton, Summe, rechts (falls ermittelbar) Prämie netto und inkl. Steuer */
/* Bis zu drei Spalten, zeilenweise gefüllt (von links nach rechts, dann die nächste Zeile); bei schmalem Platz weniger Spalten */
.portal-sums {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(max(28rem, (100% - 1rem) / 3), 1fr));
}

/* Drei gleich ausgerichtete Spalten: Versicherungssumme | Jahresprämie netto | inkl. Versicherungssteuer (Radiobutton davor).
   Als label erbt die Fläche sonst die Überschriftenschrift in Versalien, daher Fließschrift setzen. */
.portal-sum {
    align-items: center;
    background-color: var(--color__white);
    border: 1px solid var(--portal-color__border-input, #8a8f98);
    color: var(--color__midnight);
    cursor: pointer;
    display: grid;
    font: var(--font__regular);
    gap: .75rem;
    grid-template-columns: 1.5rem minmax(0, 1fr) max-content max-content;
    min-height: 3.4rem;
    padding: .5rem 1rem;
    text-transform: none;
}

    .portal-sum:hover {
        box-shadow: inset 0 0 0 1px var(--color__midnight);
    }

    .portal-sum:has(.portal-sum__input:checked),
    .portal-sum--selected {
        background-color: var(--portal-color__info-bg);
        border-color: var(--color__royal-blue);
    }

    .portal-sum:has(.portal-sum__input:focus-visible) {
        outline: 2px solid var(--color__midnight);
        outline-offset: 2px;
    }

.portal-sum__input {
    flex: none;
    margin: 0;
}

.portal-sum__amount {
    font: var(--font__bold);
    font-size: 1.1429rem;
    margin-inline-start: 1.4rem;   /* ca. 20 px zusätzlicher Abstand zum Radiobutton */
    text-transform: none;
}

.portal-sum__price {
    display: grid;
    text-align: end;
}

.portal-sum__label {
    color: var(--portal-color__text-hint, inherit);
    font: var(--font__regular);
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
}

.portal-sum__value {
    font: var(--font__regular);
    font-size: 1.0714rem;
    text-transform: none;
}

.portal-sum__individual {
    color: var(--portal-color__text-hint, inherit);
    font: var(--font__regular);
    font-size: 1rem;
    grid-column: 3 / -1;
    text-align: end;
    text-box: trim-both cap alphabetic;
    text-transform: none;
}

.portal-sum__value--strong {
    font: var(--font__bold);
    font-size: 1.1429rem;
}

/* Schmale Fenster: Summe in der ersten Zeile, die beiden Prämien darunter */
@media (max-width: 40rem) {
    .portal-sum {
        grid-template-columns: 1.5rem max-content max-content;
    }

    .portal-sum__amount {
        grid-column: 2 / -1;
    }

    .portal-sum__amount + .portal-sum__price {
        grid-column: 2;
    }
}

.portal-summary {
    background-color: var(--color__white);
    border: 1px solid var(--color__gray-2);
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.portal-summary__row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.portal-summary__text {
    font-size: .9rem;
    hyphens: none;
    margin: 0;
    max-width: none;
}

.portal-saved {
    align-items: center;
    color: var(--color__olive);
    display: flex;
    font-size: .9rem;
    gap: .4rem;
    margin: 0;
}

    .portal-saved svg {
        flex: none;
        height: 1.1rem;
        width: 1.1rem;
    }
/* ==========================================================================
   Portal: Abschluss (Schritt 5), Bestätigung, Upload, Dialog
   ========================================================================== */

.portal-message--warning {
    background-color: var(--portal-color__warning-bg);
    border-color: var(--portal-color__warning-border);
    color: var(--portal-color__warning);
}

.portal-layout__side {
    display: grid;
    gap: 2rem;
}

.portal-layout__main > * + * {
    margin-block-start: 1.5rem;
}

.portal-card--flush {
    margin-block-start: 1.5rem;
}

.portal-check--box {
    background-color: var(--portal-color__info-bg);
    border: 1px solid var(--color__royal-blue);
    padding: 1rem 1.25rem;
}

.portal-actions-row {
    align-items: flex-start;
    display: grid;
    gap: .75rem;
    justify-items: start;
    margin-block-start: 1.5rem;
}

.portal-actions-row .portal-field-hint {
    margin: 0;
    max-width: 60rem;
}

.portal-subtitle--small {
    font-size: 1.05rem;
    margin-block-start: 1.25rem;
}

.portal-files {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.portal-files__item {
    align-items: center;
    border-block-end: 1px solid var(--color__gray-2);
    display: flex;
    gap: 1rem;
    padding: .6rem 0;
}

    .portal-files__item a {
        flex: 1;
        overflow-wrap: anywhere;
    }

.portal-files__date {
    font-size: .9rem;
    opacity: .75;
}

.portal-timeline {
    display: grid;
    gap: 2rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.portal-timeline__item {
    align-items: flex-start;
    display: flex;
    gap: 1.25rem;
}

    .portal-timeline__item > div {
        display: grid;
        flex: 1;
        gap: .5rem;
        justify-items: start;
    }

    .portal-timeline__item p {
        hyphens: none;
        margin: 0;
        max-width: none;
    }

.portal-dropzone {
    align-items: center;
    border: 2px dashed var(--color__gray-2);
    display: grid;
    gap: .5rem;
    justify-items: center;
    padding: 2rem;
    width: 100%;
}

    .portal-dropzone svg {
        height: 2rem;
        width: 2rem;
    }

.portal-dropzone--over {
    background-color: var(--portal-color__info-bg);
    border-color: var(--color__royal-blue);
}

/* Schaltfläche mit dauerhaft sichtbarem Pfeil (Demo-Entwurf); die globale Variante blendet den Pfeil erst beim Überfahren ein */
.portal-button--arrow {
    align-items: center;
    display: inline-flex;
    gap: .75rem;
}

    .portal-button--arrow svg {
        display: block;
        flex: none;
        height: 1.25rem;
        opacity: 1;
        translate: none;
        width: 1.25rem;
    }

    .portal-button--arrow .button__label {
        grid-column-start: auto;
    }

/* Dialog (Übersicht für den Vertragsabschluss, Bestätigungen) */
.portal-dialog {
    /* zentriert: abschlussstrecke.css setzt margin und inset zurück, dadurch säße der Dialog oben links */
    height: fit-content;
    inset: 0;
    margin: auto;
    position: fixed;
    background-color: var(--color__white);
    border: 1px solid var(--color__midnight);
    color: var(--color__midnight);
    max-height: calc(100% - 3rem);
    max-width: 70rem;
    overflow-y: auto;
    padding: 2rem;
    width: calc(100% - 3rem);
}

    .portal-dialog::backdrop {
        background-color: color-mix(in srgb, var(--color__midnight) 60%, transparent);
    }

.portal-dialog__columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.portal-dialog__section {
    margin-block-end: 1.5rem;
}

.portal-dialog__list {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.portal-dialog__clauses {
    hyphens: none;
}

.portal-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    margin-block-start: 1.5rem;
}
/* Zusätzliche Optionen: Unterbereiche und Iframe für die Unternehmenssuche */
.portal-subpanel {
    background-color: var(--color__off-white);
    border: 1px solid var(--color__gray-2);
    display: grid;
    gap: 1rem;
    justify-items: start;
    margin-block: .5rem 1.25rem;
    padding: 1.25rem 1.5rem;
}

.portal-subpanel .form__group,
.portal-subpanel .portal-question {
    width: 100%;
}

.portal-files__main {
    display: grid;
    flex: 1;
    gap: .1rem;
}

.portal-frame {
    background: transparent;
    border: 0;
    height: 100%;
    inset: 0;
    position: fixed;
    width: 100%;
    z-index: 20000;
}
/* ==========================================================================
   Portal: kompakte Darstellung (Seiten mit breitem Inhalt)
   Der Entwurf arbeitet mit deutlich kleineren Schriften und Feldern als die Formulare der Homepage in abschlussstrecke.css.
   Die Basisschrift (rem) wird dafür auf diesen Seiten um 12,5 % verkleinert, Felder und Schritte werden schmaler gesetzt.
   ========================================================================== */

html:has(.portal-page--wide) {
    font-size: 87.5%;
}

.portal-page--wide {
    font: 400 1.0625rem/1.5 "Neue Haas Unica Pro", sans-serif;
    /* 90 % der Fensterbreite: Das Portal wird überwiegend auf Laptops genutzt */
    max-width: none;
    padding-inline: 0;
    width: 90%;
}

/* Felder links ausgerichtet und nebeneinander (die globale Regel setzt grid-column: 1/-1) */
.portal-fields > .form__group {
    align-items: flex-start;
    grid-column: auto;
}

.portal-layout--steps {
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 22vw, 32rem);
}

.portal-layout {
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 22vw, 32rem);
}

@media (max-width: 1000px) {
    .portal-layout,
    .portal-layout--steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

.portal-aside .headline {
    font-size: clamp(1.75rem, 1.2vw + 1rem, 2.5rem);
    hyphens: none;
}
.portal-step__title {
    font-size: 1.4rem;
    hyphens: none;
}

.portal-step__toggle {
    padding: 1rem 1.25rem;
}

.portal-step__body {
    padding: 0 1.5rem 1.5rem 3.75rem;
}

.portal-subtitle {
    font-size: 1.1rem;
    margin-block: 1.5rem .6rem;
}

/* Eingabefelder: normale Höhe statt der großen Felder der Homepage-Formulare */
.portal-page input:not([type="checkbox"], [type="radio"], [type="file"]),
.portal-page select,
.portal-page textarea,
.portal-dialog input:not([type="checkbox"], [type="radio"], [type="file"]),
.portal-dialog select,
.portal-dialog textarea {
    font-size: 1rem;
    max-width: 32rem;
    padding: .65rem .9rem;
}

.portal-page textarea,
.portal-dialog textarea {
    max-width: none;
    width: 100%;
}

.portal-page .form__group > label,
.portal-dialog .form__group > label {
    font-size: .9rem;
}

.portal-fields {
    gap: 1.25rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Eingabefelder wie im Demo-Entwurf: Off-white, 1 px Rahmen (3,3:1 Kontrast), linksbündig, Breite nach Inhalt */
.portal-page,
.portal-dialog {
    --portal-color__border-input: #8a8f98;
    --portal-color__text-hint: #6b6f76;
}

.portal-page input:not([type="checkbox"], [type="radio"], [type="file"]),
.portal-page select,
.portal-page textarea,
.portal-dialog input:not([type="checkbox"], [type="radio"], [type="file"]),
.portal-dialog select,
.portal-dialog textarea {
    background-color: var(--color__off-white);
    border: 1px solid var(--portal-color__border-input);
    margin-inline: 0;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    text-transform: none;
}

.portal-page input[type="date"],
.portal-dialog input[type="date"] {
    max-width: 13rem;
}

.portal-page input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
.portal-page select:focus-visible,
.portal-page textarea:focus-visible,
.portal-dialog input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
.portal-dialog select:focus-visible,
.portal-dialog textarea:focus-visible {
    border-color: var(--color__midnight);
    outline: 2px solid var(--color__midnight);
    outline-offset: 0;
}

.portal-page input::placeholder,
.portal-page textarea::placeholder,
.portal-dialog input::placeholder,
.portal-dialog textarea::placeholder {
    color: var(--portal-color__text-hint);
    opacity: 1;
}

.portal-page input::-webkit-datetime-edit,
.portal-dialog input::-webkit-datetime-edit {
    text-transform: none;
}

/* Beschriftung über dem Feld: links (abschlussstrecke.css zentriert Labels vor Datumsfeldern) */
.portal-page .form__group > label,
.portal-dialog .form__group > label {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-inline: 0;
    max-width: none;
    width: auto;
}

/* Hinweistexte: Fließschrift, 14 px, gedeckte Farbe, keine Versalien (auch innerhalb von Labels bei Checkboxen) */
.portal-field-hint {
    color: var(--portal-color__text-hint, inherit);
    font: var(--font__regular);
    font-size: 1rem;
    line-height: 1.45;
    opacity: 1;
    text-transform: none;
}

/* Zwischenüberschriften im Formular: wie im Demo-Entwurf fett, Midnight, Normalschreibweise, 18 px (die globale h3-Regel macht sie blau und groß geschrieben).
   Basisschrift der breiten Seiten ist 14 px: 1 rem = 14 px */
.portal-page .portal-subtitle {
    color: var(--color__midnight);
    font: var(--font__bold);
    font-size: 1.2857rem;
    letter-spacing: normal;
    line-height: 1.35;
    text-transform: none;
}

.portal-page .portal-subtitle--small {
    font-size: 1.1429rem;
}

/* Auswahlfelder (Zusätzliche Optionen): Fließschrift, Titel halbfett, keine Versalien */
.portal-check {
    font: var(--font__regular);
    font-size: 1.0714rem;
    line-height: 1.45;
    text-transform: none;
}

    .portal-check b {
        font-weight: 500;
    }

/* Seitenleiste mit den Antragsdaten: Beschriftung grau 14 px, Werte 15 px */
.portal-facts dt {
    color: var(--portal-color__text-hint, inherit);
    font-size: 1rem;
    font-weight: 500;
    opacity: 1;
}

.portal-facts dd {
    font-size: 1.0714rem;
    line-height: 1.45;
}

/* Jahresprämie netto: groß und fett (Neue Haas Unica, 28 px bei 14 px Basisschrift) */
.portal-facts dd.portal-facts__big {
    font-size: 2rem;
    line-height: 1.12;
}

.portal-saved {
    color: var(--color__midnight);
    font-size: 1rem;
}

/* Statuszeile: Abstand zwischen Beschriftung und Badge; ist das Badge lang (z. B. "Antragsverfahren abgeschlossen - Individuelles Angebot angefordert"),
   rutscht es unter die Beschriftung und darf umbrechen, statt an ihr zu kleben */
.portal-summary__row {
    flex-wrap: wrap;
    gap: .6rem 1rem;
}

.portal-summary__row > .portal-badge {
    max-width: 100%;
    padding: .5rem .8rem;
    white-space: normal;
}

/* Status und Antragsweg: Beschriftung wie die übrigen Angaben grau, Erläuterung 14 px */
.portal-summary__row > span:first-child {
    color: var(--portal-color__text-hint, inherit);
    font-size: 1rem;
    font-weight: 500;
}

.portal-summary__text {
    font-size: 1rem;
    line-height: 1.45;
}

.portal-page .button,
.portal-page button.button,
.portal-dialog .button {
    font-size: 1.05rem;
    padding: 1rem 1.5rem;
}
/* ==========================================================================
   Portal: Reiter der geöffneten Anträge (graue Leiste)
   ========================================================================== */

.portal-doc-tabs {
    align-items: center;
    border-inline-start: 1px solid var(--color__gray-2);
    display: flex;
    gap: .5rem;
    margin-inline-start: .75rem;
    padding-inline-start: .75rem;
}

.portal-doc-tabs:empty {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Reiter flach in der grauen Leiste wie die Tabs Startseite/Anträge: aktiver Reiter weiß mit Royal-Linie */
.portal-doc-tab {
    align-items: center;
    background-color: transparent;
    border: 0;
    border-block-end: 3px solid transparent;
    box-sizing: border-box;
    color: var(--color__midnight);
    display: flex;
    /* nicht über die ganze Leiste (45 px), sondern mit Abstand oben und unten wie im Demo-Entwurf */
    height: 36px;
    max-width: 18rem;
}

    .portal-doc-tab:hover {
        background-color: var(--color__gray-2);
    }

.portal-doc-tab--active,
.portal-doc-tab--active:hover {
    background-color: var(--color__white);
    border-block-end-color: var(--color__royal-blue);
}

.portal-doc-tab__link {
    align-items: center;
    align-self: stretch;
    color: inherit;
    display: flex;
    flex: 1;
    gap: .5rem;
    min-width: 0;
    padding-inline: .75rem .5rem;
    text-decoration: none;
}

    .portal-doc-tab__link svg {
        flex-shrink: 0;
        height: 1.1rem;
        width: 1.1rem;
    }

.portal-doc-tab__name {
    font: var(--font__bold);
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.portal-doc-tab__close:not(.background, .anchor) {
    background-color: transparent;
    color: inherit;
    isolation: auto;
    overflow: visible;
    padding: .5rem .6rem;
}

    button.portal-doc-tab__close:not(.background, .anchor)::before {
        display: none !important;
    }

    button.portal-doc-tab__close:not(.background, .anchor):hover {
        background-color: color-mix(in srgb, currentColor 15%, transparent);
    }

    .portal-doc-tab__close svg {
        height: .75rem;
        width: .75rem;
    }

/* Abstand zwischen Überschrift und Untertitel (Firmenname) */
.portal-page--wide h1.headline {
    margin-block-end: .4rem;
}

.portal-page--wide > .portal-intro__text {
    margin-block-end: 1.5rem;
}
/* ==========================================================================
   Login (Views/Extranet/Login.aspx)
   ========================================================================== */

.login-email {
    font: var(--font__bold);
    overflow-wrap: anywhere;
}

.login-help {
    border-block-start: 1px solid var(--color__gray-2);
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
}

.login-help__title {
    font: var(--font__bold);
    margin-block-end: .5rem;
}

.login-help__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-block-start: 1rem;
}