/*
 * SWS Monitor Markenebene
 * Verbindet das Portal visuell mit der Save-with-Sun-Landingpage, ohne
 * Fachkomponenten oder Livewire-Funktionen strukturell zu verändern.
 */

:root {
    color-scheme: light;
    --sws-bg: #eef5f3;
    --sws-bg-soft: #f4f8f7;
    --sws-surface: #ffffff;
    --sws-surface-raised: #ffffff;
    --sws-surface-active: #e8f3ef;
    --sws-panel: #ffffff;
    --sws-border: #d2e1dd;
    --sws-border-strong: #9cbdb5;
    --sws-text: #06353a;
    --sws-muted: #5c7478;
    --sws-green: #087765;
    --sws-green-dark: #07564d;
    --sws-cyan: #087d84;
    --sws-blue: #237a91;
    --sws-purple: #5d6685;
    --sws-amber: #ffc62d;
    --sws-red: #c94550;
    --sws-focus: #d69d00;
    --sws-shadow: 0 18px 48px rgb(5 55 55 / 10%);
    --workspace-panel: #ffffff;
    --workspace-line: #d2e1dd;
    --workspace-border: #d2e1dd;
    --workspace-text: #06353a;
    --workspace-muted: #5c7478;
}

body.portal-shell {
    background:
        radial-gradient(circle at 88% 4%, rgb(255 198 45 / 18%) 0, transparent 25rem),
        linear-gradient(180deg, #f8fbfa 0, #edf5f3 100%);
    color: var(--sws-text);
    font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
}

body.portal-shell::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgb(6 72 75 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(6 72 75 / 3%) 1px, transparent 1px);
    background-size: 38px 38px;
    content: "";
    pointer-events: none;
}

body.portal-shell h1,
body.portal-shell h2,
body.portal-shell h3,
body.portal-shell h4,
body.portal-shell strong,
body.portal-shell button {
    font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
}

body.portal-shell :focus-visible {
    outline-color: var(--sws-focus);
}

/* Portalrahmen --------------------------------------------------------- */

.desktop-sidebar {
    --sws-text: #ffffff;
    --sws-muted: #b6cfcc;
    --sws-border: #1d5d5d;
    --sws-surface: rgb(255 255 255 / 7%);
    --sws-surface-raised: #0b4c4e;
    position: sticky;
    border-right: 0;
    background:
        radial-gradient(circle at 12% 2%, rgb(255 198 45 / 12%), transparent 17rem),
        linear-gradient(165deg, #102e27 0%, #003f43 52%, #00686a 130%);
    box-shadow: 12px 0 34px rgb(4 46 48 / 10%);
}

.desktop-sidebar::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--sws-amber);
    content: "";
}

.desktop-sidebar::after {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 2.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}

.desktop-sidebar > * {
    position: relative;
    z-index: 1;
}

.brand-lockup {
    min-height: 62px;
    padding: 8px 6px;
}

.brand-lockup img {
    width: min(100%, 218px);
}

.portal-identity {
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.desktop-sidebar .nav-item,
.desktop-sidebar .secondary-navigation__summary {
    border-color: transparent;
    border-radius: 13px;
}

.desktop-sidebar .nav-item:hover,
.desktop-sidebar .secondary-navigation__summary:hover,
.desktop-sidebar .secondary-navigation[open] > .secondary-navigation__summary {
    border-color: rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 8%);
}

.desktop-sidebar .nav-item.is-active {
    border-color: #ffd65f;
    background: linear-gradient(135deg, #ffca2c, #ffd95f);
    color: #06383a;
    box-shadow: 0 10px 24px rgb(0 31 32 / 18%);
}

.desktop-sidebar .nav-item.is-active small,
.desktop-sidebar .nav-item.is-active .nav-item__icon {
    color: #28575a;
}

.desktop-sidebar .nav-unread-dot {
    border-color: #003f43;
    background: #ffc62d;
}

.sidebar-footer {
    border-color: rgb(255 255 255 / 12%);
}

.app-content {
    min-width: 0;
    background:
        radial-gradient(circle at 98% 0, rgb(255 201 47 / 15%), transparent 25rem),
        linear-gradient(180deg, #f8fbfa 0, #eef5f3 100%);
}

.topbar {
    border-bottom-color: #d7e4e1;
    background: rgb(255 255 255 / 90%);
    box-shadow: 0 8px 22px rgb(4 65 66 / 5%);
    backdrop-filter: blur(18px);
}

.topbar__context span {
    color: #708486;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.topbar__context strong,
.account-label {
    color: #06353a;
}

.account-menu > summary {
    border-color: #c9dcd7;
    background: #f7faf9;
}

.account-avatar {
    background: linear-gradient(135deg, #006c65, #008c85);
}

.account-menu__panel {
    border-color: #c8d9d5;
    background: #ffffff;
}

.account-menu__panel a,
.account-menu__panel button {
    color: #06353a;
}

.account-menu__panel a:hover,
.account-menu__panel button:hover {
    background: #edf5f2;
}

.main-content {
    min-height: calc(100vh - 76px);
}

.page-header,
.workspace-heading {
    position: relative;
}

.page-header::before,
.workspace-heading::before {
    width: 46px;
    height: 4px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--sws-amber);
    content: "";
}

.page-header h1,
.workspace-heading h1 {
    color: #06353a;
    letter-spacing: -.035em;
}

.eyebrow,
.workspace-heading__eyebrow {
    color: #087765;
}

.page-intro,
.workspace-muted,
.workspace-heading p {
    color: #60777a;
}

/* Arbeitsflächen ------------------------------------------------------- */

body.portal-shell:not(.auth-shell) :is(
    .sws-card,
    .workspace-panel,
    .workspace-entity-card,
    .workspace-record,
    .workspace-generator-card,
    .ticket-console,
    .ticket-tool-disclosure,
    .incident-event-group,
    .internal-chat
) {
    border-color: #d2e1dd;
    background-color: #ffffff;
    color: #06353a;
    box-shadow: 0 12px 32px rgb(4 65 66 / 6%);
}

body.portal-shell:not(.auth-shell) :is(
    .workspace-metric,
    .workspace-quick-card,
    .workspace-finding-group,
    .event-group-recommendation__combination,
    .event-group-recommendation__recommendation,
    .ticket-next-state,
    .workspace-generator-card,
    .workspace-technical-facts > div
) {
    border-color: #d7e4e1;
    background: #f6faf8;
    color: #06353a;
}

body.portal-shell:not(.auth-shell) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
) {
    border-color: #bfd3ce;
    background: #ffffff;
    color: #06353a;
    box-shadow: inset 0 1px 0 rgb(4 65 66 / 3%);
}

body.portal-shell:not(.auth-shell) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
)::placeholder {
    color: #7e9395;
}

body.portal-shell:not(.auth-shell) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
):focus {
    border-color: #087d73;
    box-shadow: 0 0 0 3px rgb(8 125 115 / 12%);
}

.button--primary,
.workspace-primary-button {
    border-color: #075d56;
    background: linear-gradient(135deg, #075d56, #087d73);
    color: #ffffff;
    box-shadow: 0 8px 18px rgb(5 93 86 / 18%);
}

.button--primary:hover,
.workspace-primary-button:hover {
    border-color: #004e49;
    background: linear-gradient(135deg, #004e49, #006b65);
}

.workspace-secondary-button,
.workspace-link-button,
.button--secondary {
    border-color: #b9cfca;
    background: #ffffff;
    color: #075d56;
}

.workspace-secondary-button:hover,
.workspace-link-button:hover,
.button--secondary:hover {
    border-color: #087d73;
    background: #edf6f3;
}

.workspace-status {
    border-color: #bfd6d0;
    background: #eef7f4;
    color: #075d56;
}

.workspace-status.is-danger,
.workspace-status--danger {
    border-color: #e6b8bd;
    background: #fff1f2;
    color: #a62f3b;
}

.workspace-status.is-warning,
.workspace-status--warning {
    border-color: #e8cf80;
    background: #fff9df;
    color: #765700;
}

.ticket-console__next,
.internal-chat__sidebar,
.internal-chat__timeline,
.internal-chat__composer,
.incident-event-group__communication,
.event-group-recommendation-editor {
    border-color: #d7e4e1;
    background: #f5f9f8;
}

.internal-chat__direct-form select,
.internal-chat__search input,
.internal-chat__composer textarea {
    border-color: #bfd3ce;
    background: #ffffff;
    color: #06353a;
}

.internal-chat__message {
    border-color: #c7d9d5;
    background: #eef5f3;
    color: #06353a;
}

.internal-chat__message.is-own {
    border-color: #8fc2b5;
    background: #dff1eb;
}

.portal-legal-footer {
    color: #60777a;
}

.portal-legal-footer a {
    color: #48666a;
}

.portal-legal-footer a:hover,
.portal-legal-footer a:focus-visible {
    color: #006c65;
}

.mobile-navigation {
    border-top-color: #cfdfdb;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -10px 28px rgb(4 65 66 / 9%);
}

.mobile-nav-item {
    color: #61797c;
}

.mobile-nav-item.is-active,
.mobile-nav-more.is-active > summary {
    color: #006c65;
}

.mobile-nav-item.is-active .mobile-nav-icon,
.mobile-nav-more.is-active .mobile-nav-icon {
    color: #006c65;
    background: #fff2bd;
}

.mobile-nav-more__panel {
    border-color: #cfdfdb;
    background: #ffffff;
    color: #06353a;
}

@media (max-width: 899px) {
    .portal-shell .portal-legal-footer:not(.portal-legal-footer--auth) {
        padding-bottom: 16px;
        margin-bottom: calc(94px + env(safe-area-inset-bottom));
    }
}

/* Anmeldung und Verkauf ------------------------------------------------ */

body.auth-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
    padding: 0;
    background:
        radial-gradient(circle at 90% 3%, rgb(255 198 45 / 22%), transparent 26rem),
        #eef5f3;
}

.auth-main {
    width: 100%;
    max-width: none;
    flex: 1 0 auto;
}

.auth-main > .auth-card:not(.onboarding-card) {
    margin: clamp(30px, 8vh, 90px) auto;
}

.login-page {
    width: min(100%, 1540px);
    margin: 0 auto;
    padding: clamp(16px, 2.5vw, 34px);
}

.login-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(350px, .65fr);
    gap: clamp(28px, 4vw, 70px);
    min-height: 650px;
    align-items: center;
    overflow: hidden;
    padding: clamp(30px, 5vw, 76px);
    border: 3px solid #ffc62d;
    border-radius: 30px;
    background:
        radial-gradient(circle at 83% 10%, rgb(0 151 146 / 44%), transparent 26rem),
        linear-gradient(115deg, #153528 0%, #003e43 56%, #00696a 125%);
    box-shadow: 0 20px 55px rgb(3 59 59 / 16%);
}

.login-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    pointer-events: none;
}

.login-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 11px;
    background: #ffc62d;
    content: "";
}

.login-story,
.auth-card--login {
    position: relative;
    z-index: 1;
}

.login-story {
    display: grid;
    gap: clamp(26px, 4vw, 48px);
    color: #ffffff;
}

.login-story__brand {
    display: block;
    width: min(100%, 300px);
}

.login-story__brand img {
    display: block;
    width: 100%;
    height: auto;
}

.login-story__copy {
    display: grid;
    gap: 16px;
}

.login-kicker {
    color: #ffc62d;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-story h1 {
    max-width: 980px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.6rem, 6vw, 6.3rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .96;
    text-transform: uppercase;
}

.login-story h1 span {
    display: block;
    margin-top: .12em;
    color: #ffc62d;
}

.login-story__copy > p {
    max-width: 820px;
    margin: 0;
    color: #e1ece9;
    font-size: clamp(1rem, 1.4vw, 1.23rem);
    line-height: 1.65;
}

.login-story__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.login-story__steps article {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 17px;
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 15px;
    background: rgb(255 255 255 / 9%);
    backdrop-filter: blur(8px);
}

.login-story__steps small {
    color: #ffc62d;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-story__steps strong {
    color: #ffffff;
    font-size: 1rem;
}

.login-story__steps span {
    color: #bfd2cf;
    font-size: .78rem;
    line-height: 1.5;
}

.auth-card--login {
    gap: 20px;
    padding: clamp(24px, 3vw, 38px);
    border: 0;
    border-radius: 23px;
    background: rgb(255 255 255 / 97%);
    color: #06353a;
    box-shadow: 0 28px 70px rgb(0 35 37 / 28%);
}

.auth-card--login .auth-intro h2 {
    margin: 0;
    color: #06353a;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.1;
}

.auth-card--login .auth-intro p,
.auth-card--login .auth-footnote {
    color: #60777a;
}

.auth-card--login .field-group label {
    color: #234d51;
}

.auth-card--login input {
    border-color: #bad0ca;
    background: #ffffff;
    color: #06353a;
}

.auth-card--login input:focus {
    border-color: #087d73;
    box-shadow: 0 0 0 3px rgb(8 125 115 / 13%);
}

.auth-card--login .password-field__toggle {
    color: #48686b;
}

.auth-card--login .auth-submit {
    min-height: 52px;
    border-color: #064e4d;
    background: linear-gradient(135deg, #064e4d, #007b73);
    color: #ffffff;
}

.auth-message--success {
    border-color: #9ccfc0;
    background: #e9f7f2;
    color: #075d4d;
}

.field-error {
    color: #b52f3d;
}

.login-offer {
    display: grid;
    gap: 30px;
    padding: clamp(54px, 7vw, 100px) clamp(4px, 2vw, 22px) 30px;
}

.login-offer__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
    gap: 30px;
    align-items: end;
}

.login-offer__heading h2 {
    max-width: 850px;
    margin: 8px 0 0;
    color: #06353a;
    font-size: clamp(2rem, 4.4vw, 4.4rem);
    letter-spacing: -.045em;
    line-height: 1;
}

.login-offer__heading > p {
    margin: 0;
    color: #5c7478;
    line-height: 1.65;
}

.login-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.login-plan {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 34px 28px 28px;
    border: 1px solid #cedfdb;
    border-radius: 19px;
    background: #ffffff;
    color: #06353a;
    box-shadow: 0 14px 35px rgb(4 65 66 / 7%);
}

.login-plan--featured {
    border: 2px solid #087d84;
    box-shadow: 0 20px 46px rgb(3 102 105 / 13%);
}

.login-plan__ribbon {
    position: absolute;
    top: 31px;
    left: -57px;
    width: 220px;
    padding: 8px 8px;
    transform: rotate(-36deg);
    background: #ffc62d;
    color: #06353a;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 8px 16px rgb(74 54 0 / 14%);
}

.login-plan__label {
    align-self: flex-end;
    min-height: 22px;
    color: #006c65;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.login-plan h3 {
    margin: 6px 0 0;
    color: #06353a;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.login-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.login-plan__price strong {
    color: #05444a;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1;
}

.login-plan__price span {
    color: #536e72;
    font-weight: 750;
}

.login-plan > p {
    min-height: 76px;
    margin: 0;
    padding: 14px 0 14px 14px;
    border-left: 4px solid #ffc62d;
    color: #4d696d;
    line-height: 1.55;
}

.login-plan ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-plan li {
    position: relative;
    min-height: 28px;
    padding-left: 38px;
    color: #4c686c;
    line-height: 1.5;
}

.login-plan li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: #ffc62d;
    color: #06353a;
    content: "✓";
    font-size: .8rem;
    font-weight: 900;
}

.login-plan__orders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: auto;
    padding-top: 12px;
}

.login-plan__orders a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid #bcd2cd;
    border-radius: 10px;
    color: #075d56;
    font-size: .8rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

.login-plan__orders a:hover,
.login-plan__orders a:focus-visible {
    border-color: #087d73;
    background: #edf7f4;
}

.login-plan--featured .login-plan__orders a:last-child {
    border-color: #075d56;
    background: #075d56;
    color: #ffffff;
}

.login-offer__footer {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 15px;
    background: #063f43;
    color: #ffffff;
}

.login-offer__footer span {
    color: #ffc62d;
    font-weight: 850;
}

.login-offer__footer a {
    color: #ffffff;
    font-weight: 750;
    text-underline-offset: 4px;
}

.portal-legal-footer--auth {
    width: 100%;
    color: #5c7478;
}

@media (max-width: 1180px) {
    .login-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
        padding: 42px;
    }

    .login-story__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-story__steps article {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
    }

    .login-story__steps span {
        grid-column: 2;
    }
}

@media (max-width: 940px) {
    .login-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .auth-card--login {
        width: min(100%, 620px);
    }

    .login-offer__heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-plan > p {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .topbar {
        background: rgb(255 255 255 / 96%);
    }

    .login-page {
        padding: 10px;
    }

    .login-hero {
        gap: 32px;
        padding: 28px 20px 38px;
        border-width: 2px;
        border-radius: 21px;
    }

    .login-story {
        gap: 25px;
    }

    .login-story__brand {
        width: min(72vw, 260px);
    }

    .login-story h1 {
        font-size: clamp(2.35rem, 13.5vw, 4.2rem);
    }

    .login-story__steps article {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-story__steps span {
        grid-column: 1;
    }

    .auth-card--login {
        padding: 24px 19px;
        border-radius: 17px;
    }

    .login-offer {
        padding-top: 58px;
    }

    .login-plan {
        padding: 30px 20px 22px;
    }

    .login-plan__orders {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-offer__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .login-story__copy > p {
        font-size: .94rem;
    }

    .login-plan__ribbon {
        top: 24px;
        left: -68px;
    }

    .login-plan__label {
        max-width: 50%;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-shell *,
    body.portal-shell *::before,
    body.portal-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Passwort-Wiederherstellung */
.sws-auth-help {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.15rem;
}

.sws-auth-help a,
.sws-recovery-back {
    color: #075f64;
    font-weight: 800;
    text-decoration: none;
}

.sws-auth-help a:hover,
.sws-auth-help a:focus-visible,
.sws-recovery-back:hover,
.sws-recovery-back:focus-visible {
    color: #003f43;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sws-recovery-card {
    width: min(100%, 38rem);
    margin: clamp(2rem, 7vh, 5rem) auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(4, 76, 81, 0.16);
    border-top: 0.35rem solid #ffc62a;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1.5rem 4rem rgba(0, 48, 52, 0.16);
    color: #073f43;
}

.sws-recovery-card__eyebrow {
    margin: 0 0 0.65rem;
    color: #087079;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sws-recovery-card h1 {
    margin: 0;
    color: #003f43;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.05;
}

.sws-recovery-card__intro {
    margin: 1rem 0 1.5rem;
    color: #47696c;
    font-size: 1rem;
    line-height: 1.65;
}

.sws-recovery-form {
    display: grid;
    gap: 0.65rem;
}

.sws-recovery-form label {
    margin-top: 0.55rem;
    color: #073f43;
    font-weight: 800;
}

.sws-recovery-form input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #bfd2d3;
    border-radius: 0.75rem;
    background: #fff;
    color: #073f43;
    font: inherit;
}

.sws-recovery-form input:focus {
    border-color: #087079;
    outline: 3px solid rgba(255, 198, 42, 0.38);
    outline-offset: 1px;
}

.sws-recovery-form button {
    min-height: 3.25rem;
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: #003f43;
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.sws-recovery-form button:hover,
.sws-recovery-form button:focus-visible {
    background: #075f64;
}

.sws-recovery-form button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.sws-recovery-notice {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
    padding: 1rem;
    border-left: 0.3rem solid #ffc62a;
    border-radius: 0.6rem;
    background: #f2f8f7;
    color: #234f52;
    line-height: 1.5;
}

.sws-recovery-error {
    margin: 0;
    color: #a22a25;
    font-size: 0.9rem;
    font-weight: 750;
}

.sws-recovery-error--box {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.55rem;
    background: #fff0ef;
}

.sws-recovery-back {
    display: inline-flex;
    margin-top: 1.4rem;
}

@media (max-width: 640px) {
    .sws-recovery-card {
        margin: 1rem auto;
        border-radius: 1rem;
    }
}
/* Vollstaendig lesbare Jahresabo-Banderole */
.login-plan__ribbon {
    left: -28px !important;
    top: 31px !important;
    width: 230px !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: 10.75px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    transform: rotate(-36deg) !important;
}

@media (max-width: 520px) {
    .login-plan__ribbon {
        left: -25px !important;
        width: 220px !important;
        font-size: 10.25px !important;
    }
}

/* Paketueberschrift mit sicherem Abstand unter der Banderole */
.login-plan h3 {
    margin-top: 60px !important;
}

@media (max-width: 520px) {
    .login-plan h3 {
        margin-top: 56px !important;
    }
}
/* SWS customer portal readability fix - 2026-08-25 */
:root {
    --sws-dark-card-text: #f1f8f7;
    --sws-dark-card-muted: #bdd0d3;
    --sws-dark-card-eyebrow: #8fd6c8;
    --sws-dark-card-border: rgba(190, 220, 222, 0.52);
}

/* Dark feature panels keep the premium visual language, but all legacy copy
   inside them must use a reliable light foreground. */
.portal-shell :is(
    .plant-overview,
    .energy-flow,
    .quick-link,
    #tickets .segmented-control,
    #tickets .empty-state,
    #support .sws-card,
    #energy-balance .chart-controls,
    #energy-balance .chart-shell,
    #analysis .chart-controls,
    #analysis .device-analysis,
    #account .sws-card
) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell :is(
    .plant-overview,
    .energy-flow,
    .quick-link,
    #tickets .empty-state,
    #support .sws-card,
    #energy-balance .chart-controls,
    #energy-balance .chart-shell,
    #analysis .chart-controls,
    #analysis .device-analysis,
    #account .sws-card
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, dt, dd, li, summary, time) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell :is(
    .plant-overview,
    .energy-flow,
    .quick-link,
    #support .sws-card,
    #energy-balance .chart-shell,
    #analysis .device-analysis,
    #account .sws-card
) :is(.form-note, .field-hint, .chart-unit, .push-instructions, small) {
    color: var(--sws-dark-card-muted) !important;
}

.portal-shell :is(
    .plant-overview,
    .energy-flow,
    #support .sws-card,
    #account .sws-card
) :is(.eyebrow, .section-kicker) {
    color: var(--sws-dark-card-eyebrow) !important;
}

/* Status overview and energy-flow cards. */
.portal-shell .plant-overview__facts :is(dt, dd),
.portal-shell .plant-overview__identity :is(h2, p),
.portal-shell .energy-flow__head :is(h2, p),
.portal-shell .energy-flow-card__copy :is(span, strong, small),
.portal-shell .quick-link :is(span, strong) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell .plant-overview__facts dt,
.portal-shell .energy-flow__timestamp,
.portal-shell .energy-flow-card__copy small,
.portal-shell .quick-link small {
    color: var(--sws-dark-card-muted) !important;
}

.portal-shell .energy-flow__refresh {
    color: var(--sws-dark-card-text) !important;
    border-color: var(--sws-dark-card-border) !important;
}

.portal-shell .maintenance-inline {
    color: #ffd968 !important;
}

/* Tickets: inactive filters and the empty state were dark on dark. */
.portal-shell #tickets .segmented-control button {
    color: #d8e7e5 !important;
}

.portal-shell #tickets .segmented-control button.is-active {
    color: #ffffff !important;
}

.portal-shell #tickets .empty-state :is(h2, h3, p, span) {
    color: var(--sws-dark-card-text) !important;
}

/* Form controls stay light and therefore retain dark input text. */
.portal-shell :is(
    #support .sws-card,
    #energy-balance .chart-controls,
    #analysis .chart-controls,
    #account .sws-card
) :is(input, select, textarea) {
    color: #06353a !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #06353a !important;
}

.portal-shell :is(#support .sws-card, #account .sws-card) :is(input, textarea)::placeholder {
    color: #71878a !important;
    opacity: 1;
}

.portal-shell :is(#support .sws-card, #account .sws-card) .button:not(.button--primary):not(.button--danger),
.portal-shell :is(#energy-balance, #analysis) .date-step-button {
    color: #06353a !important;
}

.portal-shell :is(#support .sws-card, #account .sws-card) .button--primary {
    color: #ffffff !important;
}

/* Support history, labels and explanatory copy. */
.portal-shell #support .sws-card :is(.section-heading, .field-group, .support-request-copy, .support-conversation, .support-reply-form) :is(h2, h3, p, label, strong, small, span, time, li) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell #support .sws-card :is(.form-note, .field-group small, .support-conversation time) {
    color: var(--sws-dark-card-muted) !important;
}

/* Chart headings, filters and legends. */
.portal-shell :is(#energy-balance, #analysis) :is(.chart-controls, .chart-shell, .device-analysis) :is(.date-control, .chart-shell__head, .mobile-analysis-note) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell :is(#energy-balance, #analysis) .segmented-control button:not(.is-active),
.portal-shell :is(#energy-balance, #analysis) .chart-legend__item {
    color: #d8e7e5 !important;
}

.portal-shell :is(#energy-balance, #analysis) .segmented-control button.is-active {
    color: #ffffff !important;
}

.portal-shell :is(#energy-balance, #analysis) .chart-legend__item {
    border-color: var(--sws-dark-card-border) !important;
}

.portal-shell :is(#energy-balance, #analysis) :is(.chart-shell__head p, .chart-unit, .mobile-analysis-note) {
    color: var(--sws-dark-card-muted) !important;
}

.portal-shell :is(#energy-balance, #analysis) :is(.chart-svg__label, .chart-svg__section-label) {
    fill: #c7d7dc !important;
}

.portal-shell :is(#energy-balance, #analysis) :is(.chart-svg__axis, .chart-svg__baseline) {
    stroke: rgba(199, 215, 220, 0.78) !important;
}

/* The energy summary contains light statistic tiles inside a dark card. */
.portal-shell #energy-balance .energy-summary > :is(h2, h3, p, .eyebrow, .section-heading) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell #energy-balance :is(.energy-summary__totals, .energy-summary__details) dt {
    color: #5c7478 !important;
}

.portal-shell #energy-balance :is(.energy-summary__totals, .energy-summary__details) dd {
    color: #06353a !important;
}

/* Account package, contact, notification and privacy cards. */
.portal-shell #account .sws-card :is(
    .package-heading,
    .account-facts,
    .feature-list,
    .details-panel,
    .preference-list,
    .preference-row,
    .account-action-form,
    .consent-check,
    .push-settings,
    .push-device
) :is(h2, h3, h4, p, span, strong, small, label, dt, dd, li) {
    color: var(--sws-dark-card-text) !important;
}

.portal-shell #account .sws-card :is(.account-facts dt, .form-note, .push-instructions) {
    color: var(--sws-dark-card-muted) !important;
}

/* Preserve semantic accent colours with enough contrast on navy. */
.portal-shell :is(.plant-overview, .energy-flow, #support .sws-card, #account .sws-card) .status-chip--success,
.portal-shell #account .preference-state {
    color: #70e0bc !important;
}

.portal-shell #support .status-chip--warning {
    color: #ffd968 !important;
}

.portal-shell #account .preference-state--neutral,
.portal-shell #account .button--danger {
    color: #ffb4bf !important;
}


/* SWS Monitor customer portal - light landing-page design system, 2026-08-25 */

body.portal-shell {
    --portal-ink: #102f35;
    --portal-petrol: #073f49;
    --portal-teal: #126b76;
    --portal-teal-strong: #087765;
    --portal-muted: #60777c;
    --portal-soft: #f1f7f6;
    --portal-soft-strong: #e7f1ef;
    --portal-card: #ffffff;
    --portal-line: #dbe7e8;
    --portal-yellow: #f4c430;
    --portal-yellow-soft: #fff5cf;
    color: var(--portal-ink);
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 88% 4%, rgba(244, 196, 48, 0.2) 0, transparent 390px),
        linear-gradient(145deg, #f8fbfa 0%, #edf6f5 62%, #ffffff 100%);
}

body.portal-shell :is(button, input, select, textarea) {
    font-family: inherit;
}

body.portal-shell .main-content {
    color: var(--portal-ink);
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) {
    color: var(--portal-ink);
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account)
    :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, dt, dd, li, summary, time, a) {
    color: var(--portal-ink) !important;
}

body.portal-shell .main-content h1 {
    color: var(--portal-ink) !important;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
}

body.portal-shell .main-content :is(h2, h3, h4) {
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.018em;
}

body.portal-shell .main-content :is(.page-intro, .form-note, .field-hint, .push-instructions) {
    color: var(--portal-muted) !important;
}

body.portal-shell .main-content :is(.eyebrow, .section-kicker) {
    color: var(--portal-teal) !important;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* One consistent light card language, matching the shop landing page. */
body.portal-shell .main-content :is(
    #status .plant-overview,
    #status .energy-flow,
    #status .quick-link,
    #tickets .segmented-control,
    #tickets .empty-state,
    #support .sws-card,
    #energy-balance .sws-card,
    #energy-balance .chart-shell,
    #analysis .sws-card,
    #analysis .device-analysis,
    #account .sws-card
) {
    color: var(--portal-ink) !important;
    background: var(--portal-card) !important;
    background-image: none !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.portal-shell .main-content :is(.sws-card, .energy-flow, .chart-shell, .device-analysis) {
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Status overview. */
body.portal-shell #status .plant-overview {
    border-top: 4px solid var(--portal-yellow) !important;
}

body.portal-shell #status .plant-overview__mark {
    color: var(--portal-petrol) !important;
    background: var(--portal-yellow-soft) !important;
    border: 1px solid rgba(244, 196, 48, 0.55) !important;
}

body.portal-shell #status .plant-overview__facts {
    border-color: var(--portal-line) !important;
    background: var(--portal-soft) !important;
    border-radius: 10px;
}

body.portal-shell #status .plant-overview__facts > * {
    border-color: var(--portal-line) !important;
}

body.portal-shell #status .plant-overview__facts dt,
body.portal-shell #status .energy-flow__timestamp,
body.portal-shell #status .energy-flow-card__copy small,
body.portal-shell #status .quick-link small {
    color: var(--portal-muted) !important;
}

body.portal-shell #status .maintenance-inline {
    color: #765700 !important;
}

body.portal-shell #status .energy-flow {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(18, 107, 118, 0.09), transparent 34%),
        linear-gradient(145deg, #f8fbfa 0%, #edf6f5 100%) !important;
    border-top: 4px solid var(--portal-teal) !important;
}

body.portal-shell #status .energy-flow::before {
    background-image: radial-gradient(rgba(18, 107, 118, 0.13) 0.75px, transparent 0.75px) !important;
}

body.portal-shell #status .energy-flow-card {
    color: var(--portal-ink) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    background-image: none !important;
    border: 1px solid #cbdfe0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(7, 63, 73, 0.07) !important;
}

body.portal-shell #status .energy-flow-card :is(span, strong, small) {
    color: var(--portal-ink) !important;
}

body.portal-shell #status .energy-flow-card small {
    color: var(--portal-muted) !important;
}

body.portal-shell #status .energy-flow-hub {
    color: #ffffff !important;
    background: var(--portal-petrol) !important;
    border-color: rgba(18, 107, 118, 0.38) !important;
    box-shadow: 0 0 0 10px rgba(18, 107, 118, 0.09) !important;
}

body.portal-shell #status .energy-flow-hub :is(span, strong, small) {
    color: #ffffff !important;
}

body.portal-shell #status .energy-flow__refresh {
    color: var(--portal-petrol) !important;
    background: #ffffff !important;
    border-color: #bfd4d6 !important;
}

body.portal-shell #status .quick-links {
    gap: 14px;
}

body.portal-shell #status .quick-link {
    min-height: 84px;
    padding: 16px 18px;
}

body.portal-shell #status .quick-link:hover {
    border-color: var(--portal-teal) !important;
    box-shadow: 0 8px 22px rgba(7, 63, 73, 0.07) !important;
}

/* Status chips use light surfaces and readable semantic colours. */
body.portal-shell .main-content :is(#status, #support, #analysis, #account) .status-chip--success,
body.portal-shell #account .preference-state {
    color: #087765 !important;
    background: #e5f4ef !important;
    border-color: #bedfd4 !important;
}

body.portal-shell #support .status-chip--warning {
    color: #6f5100 !important;
    background: var(--portal-yellow-soft) !important;
    border-color: #ecd270 !important;
}

body.portal-shell #account .preference-state--neutral {
    color: #9b3043 !important;
    background: #fff0f2 !important;
    border-color: #f1c2ca !important;
}

/* Segmented controls. */
body.portal-shell .main-content :is(#tickets, #energy-balance) .segmented-control {
    padding: 5px;
    background: var(--portal-soft) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 10px !important;
}

body.portal-shell .main-content :is(#tickets, #energy-balance) .segmented-control button {
    color: var(--portal-muted) !important;
    background: transparent !important;
    border-radius: 7px !important;
}

body.portal-shell .main-content :is(#tickets, #energy-balance) .segmented-control button.is-active {
    color: #ffffff !important;
    background: var(--portal-petrol) !important;
    box-shadow: none !important;
}

/* Tickets and empty states. */
body.portal-shell #tickets .empty-state {
    min-height: 170px;
    background: #ffffff !important;
}

body.portal-shell #tickets .empty-state__icon {
    color: var(--portal-teal-strong) !important;
    background: #e5f4ef !important;
}

body.portal-shell #tickets :is(.ticket-card, .ticket-item, .incident-card) {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Forms and support history. */
body.portal-shell .main-content :is(#support, #account) .sws-card :is(input, select, textarea),
body.portal-shell .main-content :is(#energy-balance, #analysis) .date-control input {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid #c9dcde !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--portal-ink) !important;
}

body.portal-shell .main-content :is(#support, #account) .sws-card :is(input, textarea)::placeholder {
    color: #7d9195 !important;
    opacity: 1;
}

body.portal-shell .main-content :is(#support, #account) .sws-card :is(input, select, textarea):focus,
body.portal-shell .main-content :is(#energy-balance, #analysis) .date-control input:focus {
    border-color: var(--portal-teal) !important;
    outline: 3px solid rgba(244, 196, 48, 0.35) !important;
    outline-offset: 1px;
}

body.portal-shell #support :is(.support-request-item, .support-conversation > li) {
    color: var(--portal-ink) !important;
    background: var(--portal-soft) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 10px !important;
}

body.portal-shell #support :is(.support-request-item, .support-conversation > li)
    :is(h2, h3, h4, p, span, strong, small, time, label) {
    color: var(--portal-ink) !important;
}

body.portal-shell #support :is(.support-request-item, .support-conversation > li) :is(small, time) {
    color: var(--portal-muted) !important;
}

body.portal-shell #support .privacy-note {
    color: #087765 !important;
    background: #e5f4ef !important;
    border: 1px solid #bedfd4 !important;
}

/* Buttons match the landing page: petrol primary, white secondary. */
body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) .button {
    color: var(--portal-petrol) !important;
    background: #ffffff !important;
    border: 1px solid #bfd4d6 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 700;
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) .button--primary {
    color: #ffffff !important;
    background: var(--portal-petrol) !important;
    border-color: var(--portal-petrol) !important;
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) .button--primary * {
    color: #ffffff !important;
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) .button:hover {
    border-color: var(--portal-teal) !important;
}

body.portal-shell .main-content :is(#status, #tickets, #support, #energy-balance, #analysis, #account) .button--primary:hover {
    background: #0b5963 !important;
}

body.portal-shell #account .button--danger {
    color: #9b3043 !important;
    background: #fff7f8 !important;
    border-color: #dfa8b2 !important;
}

/* Energy balance and analysis charts become light working surfaces. */
body.portal-shell .main-content :is(#energy-balance, #analysis) :is(.chart-controls, .chart-shell, .device-analysis) {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    background-image: none !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-shell {
    border-top: 4px solid var(--portal-teal) !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-canvas {
    color: var(--portal-ink) !important;
    background: #f8fbfa !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 10px !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-legend__item {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid #c9dcde !important;
    border-radius: 8px !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-legend__item:hover,
body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-legend__item.is-active {
    color: var(--portal-ink) !important;
    border-color: var(--portal-teal) !important;
    background: var(--portal-soft) !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) :is(.chart-unit, .chart-shell__head p, .mobile-analysis-note) {
    color: var(--portal-muted) !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) :is(.chart-svg__label, .chart-svg__section-label) {
    fill: #60777c !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-svg__grid {
    stroke: #dbe7e8 !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) :is(.chart-svg__axis, .chart-svg__baseline) {
    stroke: #789095 !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-tooltip {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--portal-line) !important;
    box-shadow: 0 8px 24px rgba(7, 63, 73, 0.12) !important;
}

body.portal-shell .main-content :is(#energy-balance, #analysis) .date-step-button {
    color: var(--portal-petrol) !important;
    background: #ffffff !important;
    border: 1px solid #bfd4d6 !important;
    border-radius: 8px !important;
}

body.portal-shell #energy-balance .energy-summary {
    border-top: 4px solid var(--portal-yellow) !important;
}

body.portal-shell #energy-balance :is(.energy-summary__totals, .energy-summary__details) {
    color: var(--portal-ink) !important;
    background: var(--portal-soft) !important;
    border-color: var(--portal-line) !important;
}

body.portal-shell #energy-balance :is(.energy-summary__totals, .energy-summary__details) dt {
    color: var(--portal-muted) !important;
}

body.portal-shell #energy-balance :is(.energy-summary__totals, .energy-summary__details) dd {
    color: var(--portal-ink) !important;
}

/* Analysis device selection. */
body.portal-shell #analysis .device-card {
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.portal-shell #analysis .device-card :is(span, strong, small) {
    color: var(--portal-ink) !important;
}

body.portal-shell #analysis .device-card small {
    color: var(--portal-muted) !important;
}

body.portal-shell #analysis .device-card.is-active {
    background: linear-gradient(145deg, #fff9df 0%, #edf6f5 100%) !important;
    border-color: var(--portal-teal) !important;
    box-shadow: inset 0 4px 0 var(--portal-yellow) !important;
}

/* Account cards and preferences. */
body.portal-shell #account .sws-card {
    border-top: 4px solid var(--portal-yellow) !important;
}

body.portal-shell #account :is(.details-panel, .preference-row, .push-device, .privacy-request-panel) {
    color: var(--portal-ink) !important;
    background: var(--portal-soft) !important;
    border-color: var(--portal-line) !important;
}

body.portal-shell #account :is(.details-panel, .preference-row, .push-device, .privacy-request-panel)
    :is(h2, h3, h4, p, span, strong, small, label, dt, dd, li) {
    color: var(--portal-ink) !important;
}

body.portal-shell #account :is(.account-facts dt, .form-note, .push-instructions) {
    color: var(--portal-muted) !important;
}

body.portal-shell #account .feature-list li::marker {
    color: var(--portal-yellow);
}

/* Tables and structured data stay readable if records are present. */
body.portal-shell .main-content :is(#tickets, #support, #account) table {
    width: 100%;
    color: var(--portal-ink) !important;
    background: #ffffff !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

body.portal-shell .main-content :is(#tickets, #support, #account) th {
    color: var(--portal-petrol) !important;
    background: var(--portal-soft) !important;
    font-weight: 700;
}

body.portal-shell .main-content :is(#tickets, #support, #account) :is(th, td) {
    border-color: var(--portal-line) !important;
}

/* Keep the sidebar as the single dark brand anchor. */
body.portal-shell .desktop-sidebar {
    background:
        radial-gradient(circle at 12% 2%, rgba(244, 196, 48, 0.12), transparent 272px),
        linear-gradient(165deg, #102e27 0%, #003f43 52%, #00686a 130%);
}

body.portal-shell .desktop-sidebar :is(.sidebar-kicker, .sidebar-footer p, .sidebar-footer small) {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Keyboard focus and motion. */
body.portal-shell .main-content :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(244, 196, 48, 0.8) !important;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    body.portal-shell .main-content {
        padding: 22px 16px 34px;
    }

    body.portal-shell .main-content h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.05;
    }

    body.portal-shell .main-content :is(.sws-card, .energy-flow, .chart-shell, .device-analysis) {
        border-radius: 10px !important;
    }

    body.portal-shell #status .quick-links,
    body.portal-shell .main-content :is(#support, #account) .content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.portal-shell .main-content :is(#energy-balance, #analysis) .chart-canvas {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.portal-shell #analysis .device-picker {
        scroll-snap-type: x proximity;
    }

    body.portal-shell #analysis .device-card {
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-shell *,
    body.portal-shell *::before,
    body.portal-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Customer portal visual audit corrections - 2026-08-25 */

/* Support: older dark-theme selectors still forced headings and history text white. */
html body.portal-shell main.main-content #support section.sws-card
    :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, time, dt, dd, li, summary) {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #support section.sws-card
    :is(.form-note, .field-hint, .support-conversation time, small) {
    color: #60777c !important;
}

html body.portal-shell main.main-content #support section.sws-card
    :is(.support-request-item, .support-conversation > li) {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
}

html body.portal-shell main.main-content #support section.sws-card
    :is(.support-request-item, .support-conversation > li) * {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #support section.sws-card .status-chip--warning,
html body.portal-shell main.main-content #support section.sws-card .status-chip--warning * {
    color: #6f5100 !important;
}

/* Account: restore dark copy on all light cards and preference panels. */
html body.portal-shell main.main-content #account section.sws-card
    :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, dt, dd, li, summary) {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #account section.sws-card
    :is(.account-facts dt, .form-note, .field-hint, .push-instructions, small) {
    color: #60777c !important;
}

html body.portal-shell main.main-content #account section.sws-card
    :is(.details-panel, .preference-row, .push-device, .privacy-request-panel) {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    background-image: none !important;
    border-color: #dbe7e8 !important;
}

html body.portal-shell main.main-content #account section.sws-card
    :is(.details-panel, .preference-row, .push-device, .privacy-request-panel) * {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #account section.sws-card .status-chip--success,
html body.portal-shell main.main-content #account section.sws-card .preference-state {
    color: #087765 !important;
}

html body.portal-shell main.main-content #account section.sws-card .preference-state--neutral {
    color: #9b3043 !important;
}

html body.portal-shell main.main-content #account section.sws-card .button--primary,
html body.portal-shell main.main-content #account section.sws-card .button--primary * {
    color: #ffffff !important;
}

html body.portal-shell main.main-content #account section.sws-card .button--danger,
html body.portal-shell main.main-content #account section.sws-card .button--danger * {
    color: #9b3043 !important;
}

/* Energy balance: exact selectors override the original dark chart theme. */
html body.portal-shell main.main-content #energy-balance section.sws-card.energy-balance-controls,
html body.portal-shell main.main-content #energy-balance section.chart-shell,
html body.portal-shell main.main-content #energy-balance section.sws-card.energy-summary {
    color: #102f35 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html body.portal-shell main.main-content #energy-balance section.sws-card.energy-balance-controls {
    border-top: 4px solid #f4c430 !important;
}

html body.portal-shell main.main-content #energy-balance section.chart-shell {
    border-top: 4px solid #126b76 !important;
}

html body.portal-shell main.main-content #energy-balance section.sws-card.energy-summary {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border-top: 4px solid #f4c430 !important;
}

html body.portal-shell main.main-content #energy-balance
    :is(.energy-balance-controls, .chart-shell, .energy-summary)
    :is(h1, h2, h3, h4, p, span, strong, small, label, dt, dd, button) {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #energy-balance
    :is(.chart-shell__head p, .chart-unit, small) {
    color: #60777c !important;
}

html body.portal-shell main.main-content #energy-balance .segmented-control {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
}

html body.portal-shell main.main-content #energy-balance .segmented-control button {
    color: #60777c !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy-balance .segmented-control button.is-active {
    color: #ffffff !important;
    background: #073f49 !important;
}

html body.portal-shell main.main-content #energy-balance .date-control input,
html body.portal-shell main.main-content #energy-balance .date-step-button {
    color: #102f35 !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #c9dcde !important;
}

html body.portal-shell main.main-content #energy-balance .chart-legend__item {
    color: #102f35 !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #c9dcde !important;
}

html body.portal-shell main.main-content #energy-balance .chart-legend__item:hover,
html body.portal-shell main.main-content #energy-balance .chart-legend__item.is-active {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    border-color: #126b76 !important;
}

html body.portal-shell main.main-content #energy-balance div.chart-canvas.chart-canvas--energy {
    color: #102f35 !important;
    background: #f8fbfa !important;
    background-color: #f8fbfa !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 10px !important;
}

html body.portal-shell main.main-content #energy-balance :is(.chart-svg__label, .chart-svg__section-label) {
    fill: #60777c !important;
}

html body.portal-shell main.main-content #energy-balance .chart-svg__grid {
    stroke: #dbe7e8 !important;
}

html body.portal-shell main.main-content #energy-balance :is(.chart-svg__axis, .chart-svg__baseline) {
    stroke: #789095 !important;
}

/* Compact, scannable balance grid instead of one long vertical list. */
html body.portal-shell main.main-content #energy-balance .energy-summary__totals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy-balance .energy-summary__details {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy-balance
    :is(.energy-summary__totals, .energy-summary__details) > div {
    min-width: 0;
    padding: 16px 18px !important;
    background: #f1f7f6 !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 10px !important;
}

html body.portal-shell main.main-content #energy-balance
    :is(.energy-summary__totals, .energy-summary__details) dt {
    color: #60777c !important;
    margin: 0 0 6px !important;
}

html body.portal-shell main.main-content #energy-balance
    :is(.energy-summary__totals, .energy-summary__details) dd {
    color: #102f35 !important;
    margin: 0 !important;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    html body.portal-shell main.main-content #energy-balance .energy-summary__details {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body.portal-shell main.main-content #energy-balance
        :is(.energy-summary__totals, .energy-summary__details) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* Energy balance visual fix for actual page id #energy - 2026-08-25 */

html body.portal-shell main.main-content #energy
    :is(section.sws-card.energy-balance-controls, section.chart-shell, section.sws-card.energy-summary) {
    color: #102f35 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html body.portal-shell main.main-content #energy section.sws-card.energy-balance-controls {
    border-top: 4px solid #f4c430 !important;
}

html body.portal-shell main.main-content #energy section.chart-shell {
    border-top: 4px solid #126b76 !important;
}

html body.portal-shell main.main-content #energy section.sws-card.energy-summary {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border-top: 4px solid #f4c430 !important;
}

html body.portal-shell main.main-content #energy
    :is(.energy-balance-controls, .chart-shell, .energy-summary)
    :is(h1, h2, h3, h4, p, span, strong, small, label, dt, dd, button) {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #energy
    :is(.chart-shell__head p, .chart-unit, small) {
    color: #60777c !important;
}

html body.portal-shell main.main-content #energy .segmented-control {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
}

html body.portal-shell main.main-content #energy .segmented-control button {
    color: #60777c !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy .segmented-control button.is-active {
    color: #ffffff !important;
    background: #073f49 !important;
}

html body.portal-shell main.main-content #energy .date-control input,
html body.portal-shell main.main-content #energy .date-step-button {
    color: #102f35 !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #c9dcde !important;
}

html body.portal-shell main.main-content #energy .chart-legend__item {
    color: #102f35 !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #c9dcde !important;
}

html body.portal-shell main.main-content #energy .chart-legend__item:hover,
html body.portal-shell main.main-content #energy .chart-legend__item.is-active {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    border-color: #126b76 !important;
}

html body.portal-shell main.main-content #energy div.chart-canvas.chart-canvas--energy {
    color: #102f35 !important;
    background: #f8fbfa !important;
    background-color: #f8fbfa !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 10px !important;
}

html body.portal-shell main.main-content #energy :is(.chart-svg__label, .chart-svg__section-label) {
    fill: #60777c !important;
}

html body.portal-shell main.main-content #energy .chart-svg__grid {
    stroke: #dbe7e8 !important;
}

html body.portal-shell main.main-content #energy :is(.chart-svg__axis, .chart-svg__baseline) {
    stroke: #789095 !important;
}

html body.portal-shell main.main-content #energy .energy-summary__totals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy .energy-summary__details {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

html body.portal-shell main.main-content #energy
    :is(.energy-summary__totals, .energy-summary__details) > div {
    min-width: 0;
    padding: 16px 18px !important;
    background: #f1f7f6 !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 10px !important;
}

html body.portal-shell main.main-content #energy
    :is(.energy-summary__totals, .energy-summary__details) dt {
    color: #60777c !important;
    margin: 0 0 6px !important;
}

html body.portal-shell main.main-content #energy
    :is(.energy-summary__totals, .energy-summary__details) dd {
    color: #102f35 !important;
    margin: 0 !important;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    html body.portal-shell main.main-content #energy .energy-summary__details {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body.portal-shell main.main-content #energy
        :is(.energy-summary__totals, .energy-summary__details) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* Customer portal final visual details - 2026-08-25 */

html body.portal-shell main.main-content #support section.sws-card .button--primary,
html body.portal-shell main.main-content #support section.sws-card .button--primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.portal-shell main.main-content #energy svg .chart-svg__section-label {
    fill: #102f35 !important;
    color: #102f35 !important;
    font-weight: 700 !important;
}

html body.portal-shell main.main-content #energy svg .chart-svg__label {
    fill: #60777c !important;
    color: #60777c !important;
}


/* Customer portal hidden-state contrast fix - 2026-08-25 */

html body.portal-shell main.main-content #status .plant-overview .eyebrow {
    color: #126b76 !important;
}

html body.portal-shell main.main-content #status .energy-flow-card small,
html body.portal-shell main.main-content #status .quick-link small {
    color: #60777c !important;
}

html body.portal-shell main.main-content #support section.sws-card .support-conversation li {
    color: #102f35 !important;
    background: #f1f7f6 !important;
    background-color: #f1f7f6 !important;
    background-image: none !important;
    border: 1px solid #dbe7e8 !important;
    border-radius: 10px !important;
}

html body.portal-shell main.main-content #support section.sws-card .support-conversation li * {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #support section.sws-card .support-conversation li time,
html body.portal-shell main.main-content #support section.sws-card .support-conversation li small {
    color: #60777c !important;
}

html body.portal-shell main.main-content #support section.sws-card
    :is(.support-reply-form, .support-conversation) .button--primary,
html body.portal-shell main.main-content #support section.sws-card
    :is(.support-reply-form, .support-conversation) .button--primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.portal-shell main.main-content #analysis .date-control {
    color: #102f35 !important;
}

html body.portal-shell main.main-content #analysis .chart-legend__item small {
    color: #60777c !important;
}


/* SWS Monitor: tiefe Kundenportal-Pruefung, 25.08.2026 */
:where(#status, #tickets, #support, #energy, #analysis, #account) {
    color: #102f35;
    font-size: 17px;
    line-height: 1.58;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(p, li, dt, dd, label, input, select, textarea, button) {
    font-size: inherit;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input, select, textarea) {
    color: #102f35 !important;
    background: #ffffff !important;
    border: 1px solid #9eb8b9 !important;
    border-radius: 10px !important;
    line-height: 1.45;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 48px;
    padding: 10px 13px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) textarea {
    min-height: 132px;
    padding: 12px 13px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(button, .button, summary) {
    min-height: 48px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(button, .button, input, select, textarea, summary, a):focus-visible {
    outline: 3px solid #f4c430 !important;
    outline-offset: 3px !important;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input[type="checkbox"], input[type="radio"]) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    accent-color: #0a6670;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) .consent-check {
    min-height: 48px;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.nav-item {
    min-height: 58px;
}

.nav-item strong {
    font-size: 16px !important;
}

.nav-item small {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.mobile-nav-item,
.mobile-nav-more__link {
    min-height: 56px;
    font-size: 14px !important;
}

.eyebrow,
.ticket-id {
    font-size: 14px !important;
    letter-spacing: .08em !important;
}

.support-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#tickets .ticket-card {
    border: 1px solid #cfdede !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(7, 63, 73, .06) !important;
}

#tickets .ticket-card > h2 {
    color: #073f49 !important;
    font-size: clamp(22px, 2vw, 27px) !important;
    line-height: 1.25 !important;
}

#tickets .ticket-card__facts {
    gap: 12px 28px;
}

#tickets .ticket-card__facts dt {
    color: #536e73 !important;
    font-size: 15px !important;
}

#tickets .ticket-card__facts dd {
    color: #102f35 !important;
    font-size: 17px !important;
}

#tickets .ticket-details {
    margin-top: 20px;
    border-top: 1px solid #d7e4e4;
}

#tickets .ticket-details > summary {
    display: flex;
    align-items: center;
    color: #073f49 !important;
    background: #f1f7f6 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 10px !important;
    padding: 10px 48px 10px 16px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

#tickets .ticket-details > summary::after {
    right: 17px !important;
    color: #0a6670 !important;
}

#tickets .details-label--open {
    display: none;
}

#tickets .ticket-details[open] .details-label--closed {
    display: none;
}

#tickets .ticket-details[open] .details-label--open {
    display: inline;
}

#tickets .ticket-details__content {
    padding-top: 16px !important;
}

#tickets .ticket-event-group {
    color: #102f35 !important;
    background: #ffffff !important;
    border: 1px solid #c9dddd !important;
    border-left: 6px solid #f4c430 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(7, 63, 73, .06) !important;
    padding: clamp(18px, 2.5vw, 28px) !important;
}

#tickets .ticket-event-group :where(h3, h4, strong, p, small, span, time, label) {
    color: #102f35 !important;
}

#tickets .ticket-event-group__head {
    padding-bottom: 16px;
    border-bottom: 1px solid #d7e4e4 !important;
}

#tickets .ticket-event-group__head h3 {
    font-size: 23px !important;
}

#tickets .ticket-event-group__codes {
    display: none !important;
}

#tickets .ticket-findings__list article {
    color: #102f35 !important;
    background: #f3f8f7 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

#tickets .ticket-findings__list h4 {
    color: #073f49 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
}

#tickets .ticket-timeline {
    color: #102f35 !important;
    background: #ffffff !important;
    border-top: 1px solid #d7e4e4 !important;
    padding-top: 20px !important;
}

#tickets .ticket-timeline > h4,
#tickets .customer-ticket-reply > h4 {
    color: #073f49 !important;
    font-size: 20px !important;
}

#tickets .ticket-timeline li {
    padding: 10px 0 18px 30px !important;
}

#tickets .timeline-marker {
    background: #f4c430 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 2px #0a6670 !important;
}

#tickets .customer-ticket-reply,
#tickets .customer-recommendation,
#tickets .installer-decision {
    color: #102f35 !important;
    background: #eef6f5 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

#support .support-form,
#support .support-conversation,
#support .support-reply-form {
    color: #102f35 !important;
}

#support .support-request-item {
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden;
}

#support .support-request-item > summary {
    padding: 12px 50px 12px 16px !important;
    cursor: pointer;
}

#support .support-request-item[open] > summary {
    background: #eef6f5 !important;
    border-bottom: 1px solid #c9dddd !important;
}

#support .support-request-copy strong {
    color: #073f49 !important;
    font-size: 18px !important;
}

#support .support-request-copy small {
    color: #536e73 !important;
    font-size: 15px !important;
}

#support .support-conversation {
    background: #ffffff !important;
    padding: 18px !important;
}

#support .support-conversation li {
    color: #102f35 !important;
    background: #f3f8f7 !important;
    border: 1px solid #d4e2e1 !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

#support .support-conversation li p {
    color: #102f35 !important;
    line-height: 1.58 !important;
}

#energy .energy-balance-controls__date {
    align-items: end !important;
}

#energy .date-control small {
    display: block;
    color: #536e73;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 5px;
}

#energy .energy-summary h2,
#analysis .device-analysis h2,
#account h2 {
    color: #073f49 !important;
}

#analysis .device-card {
    min-height: 150px;
    text-align: left;
}

#analysis .device-card strong {
    font-size: 18px !important;
}

#analysis .device-card small {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

#analysis .device-card.is-active {
    background: #eef6f5 !important;
    border: 2px solid #0a6670 !important;
    box-shadow: 0 0 0 3px rgba(244, 196, 48, .35) !important;
}

#account .preference-row {
    min-height: 76px;
    gap: 18px;
}

#account .preference-row strong {
    color: #073f49 !important;
    font-size: 18px !important;
}

#account .preference-row span,
#account .form-note,
#account .details-panel p {
    line-height: 1.55 !important;
}

#account .details-panel > summary {
    color: #073f49 !important;
    background: #eef6f5 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 10px !important;
    padding: 10px 48px 10px 16px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

#account .privacy-request-panel[open] {
    border: 1px solid #e1b7b3 !important;
    border-radius: 12px !important;
    padding: 0 16px 16px !important;
}

#account .privacy-request-panel[open] > summary {
    margin: 0 -16px 16px !important;
    border-color: #e1b7b3 !important;
    background: #fff4f2 !important;
}

.loading-status {
    min-height: 48px;

    align-items: center;
    gap: 10px;
    color: #073f49 !important;
    background: #fff8d9 !important;
    border: 1px solid #e5bd25 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 700;
}

@media (max-width: 760px) {
    :where(#status, #tickets, #support, #energy, #analysis, #account) {
        font-size: 16.5px;
        line-height: 1.55;
    }

    #tickets .ticket-event-group {
        padding: 16px !important;
    }

    #tickets .ticket-card__head,
    #tickets .ticket-event-group__head,
    #support .support-request-item > summary,
    #account .preference-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #support .support-request-status,
    #tickets .ticket-card__status {
        width: 100%;
        justify-content: flex-start !important;
    }

    #energy .energy-balance-controls__date {
        align-items: stretch !important;
    }

    #energy .energy-balance-controls__date > button {
        min-width: 48px;
    }
}
/* SWS Monitor: tiefe Kundenportal-Pruefung, 25.08.2026 */
:where(#status, #tickets, #support, #energy, #analysis, #account) {
    color: #102f35;
    font-size: 17px;
    line-height: 1.58;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(p, li, dt, dd, label, input, select, textarea, button) {
    font-size: inherit;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input, select, textarea) {
    color: #102f35 !important;
    background: #ffffff !important;
    border: 1px solid #9eb8b9 !important;
    border-radius: 10px !important;
    line-height: 1.45;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 48px;
    padding: 10px 13px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) textarea {
    min-height: 132px;
    padding: 12px 13px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(button, .button, summary) {
    min-height: 48px;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(button, .button, input, select, textarea, summary, a):focus-visible {
    outline: 3px solid #f4c430 !important;
    outline-offset: 3px !important;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) :where(input[type="checkbox"], input[type="radio"]) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    accent-color: #0a6670;
}

:where(#status, #tickets, #support, #energy, #analysis, #account) .consent-check {
    min-height: 48px;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.nav-item {
    min-height: 58px;
}

.nav-item strong {
    font-size: 16px !important;
}

.nav-item small {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.mobile-nav-item,
.mobile-nav-more__link {
    min-height: 56px;
    font-size: 14px !important;
}

.eyebrow,
.ticket-id {
    font-size: 14px !important;
    letter-spacing: .08em !important;
}

.support-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#tickets .ticket-card {
    border: 1px solid #cfdede !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(7, 63, 73, .06) !important;
}

#tickets .ticket-card > h2 {
    color: #073f49 !important;
    font-size: clamp(22px, 2vw, 27px) !important;
    line-height: 1.25 !important;
}

#tickets .ticket-card__facts {
    gap: 12px 28px;
}

#tickets .ticket-card__facts dt {
    color: #536e73 !important;
    font-size: 15px !important;
}

#tickets .ticket-card__facts dd {
    color: #102f35 !important;
    font-size: 17px !important;
}

#tickets .ticket-details {
    margin-top: 20px;
    border-top: 1px solid #d7e4e4;
}

#tickets .ticket-details > summary {
    display: flex;
    align-items: center;
    color: #073f49 !important;
    background: #f1f7f6 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 10px !important;
    padding: 10px 48px 10px 16px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

#tickets .ticket-details > summary::after {
    right: 17px !important;
    color: #0a6670 !important;
}

#tickets .details-label--open {
    display: none;
}

#tickets .ticket-details[open] .details-label--closed {
    display: none;
}

#tickets .ticket-details[open] .details-label--open {
    display: inline;
}

#tickets .ticket-details__content {
    padding-top: 16px !important;
}

#tickets .ticket-event-group {
    color: #102f35 !important;
    background: #ffffff !important;
    border: 1px solid #c9dddd !important;
    border-left: 6px solid #f4c430 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(7, 63, 73, .06) !important;
    padding: clamp(18px, 2.5vw, 28px) !important;
}

#tickets .ticket-event-group :where(h3, h4, strong, p, small, span, time, label) {
    color: #102f35 !important;
}

#tickets .ticket-event-group__head {
    padding-bottom: 16px;
    border-bottom: 1px solid #d7e4e4 !important;
}

#tickets .ticket-event-group__head h3 {
    font-size: 23px !important;
}

#tickets .ticket-event-group__codes {
    display: none !important;
}

#tickets .ticket-findings__list article {
    color: #102f35 !important;
    background: #f3f8f7 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

#tickets .ticket-findings__list h4 {
    color: #073f49 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
}

#tickets .ticket-timeline {
    color: #102f35 !important;
    background: #ffffff !important;
    border-top: 1px solid #d7e4e4 !important;
    padding-top: 20px !important;
}

#tickets .ticket-timeline > h4,
#tickets .customer-ticket-reply > h4 {
    color: #073f49 !important;
    font-size: 20px !important;
}

#tickets .ticket-timeline li {
    padding: 10px 0 18px 30px !important;
}

#tickets .timeline-marker {
    background: #f4c430 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 2px #0a6670 !important;
}

#tickets .customer-ticket-reply,
#tickets .customer-recommendation,
#tickets .installer-decision {
    color: #102f35 !important;
    background: #eef6f5 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

#support .support-form,
#support .support-conversation,
#support .support-reply-form {
    color: #102f35 !important;
}

#support .support-request-item {
    border: 1px solid #c9dddd !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden;
}

#support .support-request-item > summary {
    padding: 12px 50px 12px 16px !important;
    cursor: pointer;
}

#support .support-request-item[open] > summary {
    background: #eef6f5 !important;
    border-bottom: 1px solid #c9dddd !important;
}

#support .support-request-copy strong {
    color: #073f49 !important;
    font-size: 18px !important;
}

#support .support-request-copy small {
    color: #536e73 !important;
    font-size: 15px !important;
}

#support .support-conversation {
    background: #ffffff !important;
    padding: 18px !important;
}

#support .support-conversation li {
    color: #102f35 !important;
    background: #f3f8f7 !important;
    border: 1px solid #d4e2e1 !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

#support .support-conversation li p {
    color: #102f35 !important;
    line-height: 1.58 !important;
}

#energy .energy-balance-controls__date {
    align-items: end !important;
}

#energy .date-control small {
    display: block;
    color: #536e73;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 5px;
}

#energy .energy-summary h2,
#analysis .device-analysis h2,
#account h2 {
    color: #073f49 !important;
}

#analysis .device-card {
    min-height: 150px;
    text-align: left;
}

#analysis .device-card strong {
    font-size: 18px !important;
}

#analysis .device-card small {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

#analysis .device-card.is-active {
    background: #eef6f5 !important;
    border: 2px solid #0a6670 !important;
    box-shadow: 0 0 0 3px rgba(244, 196, 48, .35) !important;
}

#account .preference-row {
    min-height: 76px;
    gap: 18px;
}

#account .preference-row strong {
    color: #073f49 !important;
    font-size: 18px !important;
}

#account .preference-row span,
#account .form-note,
#account .details-panel p {
    line-height: 1.55 !important;
}

#account .details-panel > summary {
    color: #073f49 !important;
    background: #eef6f5 !important;
    border: 1px solid #c9dddd !important;
    border-radius: 10px !important;
    padding: 10px 48px 10px 16px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

#account .privacy-request-panel[open] {
    border: 1px solid #e1b7b3 !important;
    border-radius: 12px !important;
    padding: 0 16px 16px !important;
}

#account .privacy-request-panel[open] > summary {
    margin: 0 -16px 16px !important;
    border-color: #e1b7b3 !important;
    background: #fff4f2 !important;
}

.loading-status {
    min-height: 48px;

    align-items: center;
    gap: 10px;
    color: #073f49 !important;
    background: #fff8d9 !important;
    border: 1px solid #e5bd25 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 700;
}

@media (max-width: 760px) {
    :where(#status, #tickets, #support, #energy, #analysis, #account) {
        font-size: 16.5px;
        line-height: 1.55;
    }

    #tickets .ticket-event-group {
        padding: 16px !important;
    }

    #tickets .ticket-card__head,
    #tickets .ticket-event-group__head,
    #support .support-request-item > summary,
    #account .preference-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #support .support-request-status,
    #tickets .ticket-card__status {
        width: 100%;
        justify-content: flex-start !important;
    }

    #energy .energy-balance-controls__date {
        align-items: stretch !important;
    }

    #energy .energy-balance-controls__date > button {
        min-width: 48px;
    }
}
/* Abschliessende Lesbarkeitskorrekturen fuer aeltere Kundinnen und Kunden */
.portal-main button,
.portal-main .button,
.portal-main [role="button"] {
    min-height: 44px;
}

#status .energy-flow-card__copy small {
    font-size: 0.94rem;
    line-height: 1.4;
}

#status .energy-flow-hub small {
    font-size: 0.82rem;
    line-height: 1.35;
}

#status .energy-flow-section > p,
#status .quick-link-card small,
.portal-main .form-note,
.portal-main .field-hint,
.portal-main .privacy-note,
#account .push-instructions {
    font-size: 0.95rem;
    line-height: 1.55;
}

#account .consent-check > span {
    display: grid;
    gap: 0.28rem;
}

#account .consent-check small {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
}

#account .preference-row--push {
    align-items: flex-start;
}

#account .push-settings {
    width: min(100%, 44rem);
    text-align: left;
}

.energy-balance-chart text,
.analysis-chart text {
    font-size: 0.82rem;
}

@media (max-width: 720px) {
    .portal-main button,
    .portal-main .button,
    .portal-main [role="button"],
    .portal-main summary {
        min-height: 48px;
    }

    #status .energy-flow-card__copy small,
    #status .quick-link-card small,
    .portal-main .form-note,
    .portal-main .field-hint,
    #account .consent-check small,
    #account .push-instructions {
        font-size: 1rem;
    }
}/* Ausreichend grosse Bedienflaeche fuer die manuelle Aktualisierung */
#status button {
    min-height: 44px;
    padding-block: 0.65rem;
}

@media (max-width: 720px) {
    #status button {
        min-height: 48px;
    }
}
/* Password change: light, high-contrast presentation */
.auth-shell .auth-card {
    color: #102f35;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 196, 31, 0.16), transparent 34%),
        linear-gradient(145deg, #ffffff 0%, #f4faf9 100%);
    border: 1px solid rgba(6, 63, 67, 0.18);
    box-shadow: 0 24px 70px rgba(6, 63, 67, 0.15);
}

.auth-shell .auth-brand {
    padding-bottom: 0.4rem;
}

.auth-shell .auth-brand img {
    width: min(100%, 18rem);
    height: auto;
}

.auth-shell .auth-card h1,
.auth-shell .auth-card label {
    color: #102f35;
}

.auth-shell .auth-card .eyebrow {
    color: #087f78;
}

.auth-shell .auth-intro p {
    color: #506f74;
    font-size: 1.05rem;
    line-height: 1.6;
}

.auth-shell .auth-form input {
    min-height: 54px;
    color: #102f35;
    background: #ffffff;
    border: 1.5px solid #78979a;
}

.auth-shell .auth-form input:hover {
    border-color: #376f73;
}

.auth-shell .auth-form input:focus {
    border-color: #087f78;
    outline: 3px solid rgba(255, 196, 31, 0.52);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(8, 127, 120, 0.1);
}

.auth-shell .auth-submit {
    min-height: 52px;
    font-size: 1.05rem;
}

/* Month and year: leave a clear gap between neighboring day stacks */
.chart-svg__energy-bar {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(0.82);
}

/* Chart information card: readable in pointer and keyboard operation */
.chart-tooltip {
    min-width: 18rem;
    color: #102f35 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(6, 63, 67, 0.28) !important;
    box-shadow: 0 16px 40px rgba(6, 63, 67, 0.2) !important;
}

.chart-tooltip__time {
    color: #063f43 !important;
    border-bottom-color: rgba(6, 63, 67, 0.22) !important;
}

.chart-tooltip__row,
.chart-tooltip__label,
.chart-tooltip__row b {
    color: #102f35 !important;
}

.chart-tooltip__row {
    gap: 1rem;
}

@media (max-width: 720px) {
    .auth-shell .auth-card {
        border-radius: 1.1rem;
    }

    .chart-tooltip {
        min-width: min(18rem, calc(100vw - 2rem));
        font-size: 1rem;
    }
}
/* Keep the legal footer inside the auth page width */
.auth-shell {
    flex-direction: column;
}

.auth-shell .auth-main {
    width: 100%;
    flex: 1 0 auto;
}

.auth-shell .portal-legal-footer--auth {
    width: 100%;
    min-height: auto;
    align-self: stretch;
}
/* Der programmgesteuert fokussierte Seiteninhalt darf nicht als gelber
   Rahmen um das gesamte Kundenportal erscheinen. Interaktive Elemente
   behalten ihre eigenen, gut sichtbaren Fokusmarkierungen. */
body.portal-shell .main-content:focus,
body.portal-shell .main-content:focus-visible {
    outline: none !important;
}

/* SWS mobile energy flow correction - 2026-08-25 */
@media (max-width: 720px) {
    #status .energy-flow-card__icon {
        color: #102f35 !important;
        background: #edf4f3 !important;
        border: 1px solid #c7d7d7 !important;
        box-shadow: none !important;
    }

    #status .energy-flow-card__icon .sws-icon {
        color: #102f35 !important;
        stroke: currentColor !important;
    }

    #status .energy-flow__head {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    #status .energy-flow__timestamp {
        min-width: 112px;
        gap: 6px !important;
    }

    #status .energy-flow__timestamp > span {
        display: block !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.08em !important;
    }

    #status .energy-flow__timestamp time {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        white-space: nowrap;
    }

    #status .energy-flow__refresh {
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }
}

/* SWS iPhone safe-area correction - 2026-08-25 */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 900px) {
        body.portal-shell .topbar {
            box-sizing: border-box;
            height: auto !important;
            min-height: calc(68px + env(safe-area-inset-top)) !important;
            padding-top: calc(9px + env(safe-area-inset-top)) !important;
            padding-right: max(16px, env(safe-area-inset-right)) !important;
            padding-left: max(16px, env(safe-area-inset-left)) !important;
        }
    }
}

/* SWS Monitor 1.0.0.2: eigenständige Geräteauswertung ohne Kartenverschachtelung */
.analysis-chart-stage {
    min-width: 0;
}

/* Kompatibilität mit bereits kompilierten 1.0.0.1-Vorlagen */
.device-analysis {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.portal-shell main#main-content .device-analysis {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.device-analysis > h2 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.analysis-chart-stage .chart-shell,
.device-analysis .chart-shell {
    width: 100%;
    padding: clamp(22px, 2.5vw, 34px);
    border: 1px solid var(--sws-border);
    border-radius: clamp(18px, 2vw, 26px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 250, 0.98)),
        var(--sws-surface);
    box-shadow: 0 18px 48px rgba(3, 55, 59, 0.08);
}

.analysis-chart-stage .chart-shell__head,
.device-analysis .chart-shell__head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sws-border);
}

.analysis-chart-stage .chart-shell__head h2,
.device-analysis .chart-shell__head h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.analysis-chart-stage .chart-unit,
.device-analysis .chart-unit {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--sws-border);
    border-radius: 999px;
    color: var(--sws-text);
    background: var(--sws-bg-soft);
    font-weight: 750;
}

.analysis-chart-stage .chart-legend,
.device-analysis .chart-legend {
    gap: 10px;
    margin-block: 18px 12px;
}

.analysis-chart-stage .chart-legend__item,
.device-analysis .chart-legend__item {
    min-height: 44px;
}

.analysis-chart-stage .chart-canvas,
.device-analysis .chart-canvas {
    min-height: clamp(360px, 45vw, 620px);
}

@media (max-width: 760px) {
    .analysis-chart-stage .chart-shell,
    .device-analysis .chart-shell {
        padding: 16px;
        border-radius: 16px;
        box-shadow: none;
    }

    .analysis-chart-stage .chart-shell__head,
    .device-analysis .chart-shell__head {
        gap: 10px;
        padding-bottom: 14px;
    }
}