/*
 * Sihu21TV Portal Redesign
 * Global Design Foundation
 */

:root {
    --portal-blue: #47A1DD;
    --portal-indigo: #2E3A8C;
    --portal-violet: #7C5CFF;

    --portal-ink: #171B2E;
    --portal-ink-soft: #4B5170;
    --portal-ink-faint: #8A90AC;

    --portal-paper: #F5F6FA;
    --portal-paper-alt: #ECEFF7;
    --portal-white: #FFFFFF;

    --portal-success: #3FAE86;
    --portal-warning: #E0A63C;
    --portal-danger: #E0556B;

    --portal-radius-sm: 10px;
    --portal-radius: 16px;
    --portal-radius-lg: 22px;

    --portal-border: rgba(23, 27, 46, 0.075);

    --portal-shadow:
        0 18px 50px -28px rgba(23, 27, 46, .32);

    --portal-shadow-hover:
        0 24px 60px -28px rgba(23, 27, 46, .40);
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

html {
    background: var(--portal-paper);
}

body {
    font-family: "Inter", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif !important;

    color: var(--portal-ink);
    background: var(--portal-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.topbar-heading,
.brand strong {
    font-family: "Sora", "Inter", sans-serif !important;
    letter-spacing: -.025em;
}

code,
pre,
kbd,
.mono,
.technical-data,
.timestamp {
    font-family: "IBM Plex Mono", monospace !important;
}


/* =========================================================
   PORTAL-GRUNDGERÜST
   ========================================================= */

.portal-shell,
.portal-simple-shell,
.portal-main {
    background: var(--portal-paper) !important;
}

.simple-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(250,251,255,.96)
        ) !important;

    border-right: 1px solid var(--portal-border) !important;
    box-shadow: 14px 0 45px -35px rgba(23,27,46,.30);
    color: var(--portal-ink) !important;
}

.simple-brand {
    position: relative;
    color: var(--portal-ink) !important;
}

.simple-brand strong {
    color: var(--portal-ink) !important;
    font-weight: 700;
}

.simple-brand span:not(.material-symbols-rounded) {
    color: var(--portal-ink-soft);
}


/* =========================================================
   SIGNATUR: PORTAL / TORBOGEN
   ========================================================= */

.simple-brand .brand-icon {
    position: relative;
    overflow: hidden;

    border-radius: 50% 50% 12px 12px !important;

    background:
        linear-gradient(
            145deg,
            var(--portal-blue),
            var(--portal-violet)
        ) !important;

    box-shadow:
        0 8px 24px -10px rgba(71,161,221,.75),
        0 0 0 1px rgba(124,92,255,.10);
}

.simple-brand .brand-icon::after {
    content: "";
    position: absolute;
    inset: 5px 5px 0;
    border: 1px solid rgba(255,255,255,.34);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    pointer-events: none;
}


/* =========================================================
   GRUPPENWECHSEL
   ========================================================= */

.portal-group-switcher-label {
    color: var(--portal-ink-faint) !important;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px !important;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.portal-group-switcher-card {
    background: var(--portal-paper) !important;
    border: 1px solid var(--portal-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.portal-group-switcher-card:hover {
    transform: translateY(-1px);
    border-color: rgba(71,161,221,.30) !important;
    box-shadow: 0 10px 30px -24px rgba(23,27,46,.5) !important;
}

.portal-group-switcher-copy strong,
.portal-group-switcher-copy select {
    color: var(--portal-ink) !important;
}

.portal-group-switcher-copy small {
    color: var(--portal-ink-soft) !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.simple-navigation {
    gap: 4px;
}

.simple-nav-link {
    position: relative;

    color: var(--portal-ink-soft) !important;
    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 12px !important;

    min-height: 44px;

    font-weight: 550;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.simple-nav-link:hover {
    color: var(--portal-ink) !important;
    background: rgba(71,161,221,.075) !important;
    transform: translateX(2px);
}

.simple-nav-link.is-active {
    color: var(--portal-indigo) !important;

    background:
        linear-gradient(
            90deg,
            rgba(71,161,221,.13),
            rgba(124,92,255,.055)
        ) !important;

    border-color: rgba(71,161,221,.12) !important;
    font-weight: 650;
}

.simple-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;

    width: 3px;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            var(--portal-blue),
            var(--portal-violet)
        );
}

.simple-nav-link .material-symbols-rounded {
    color: currentColor;
    font-size: 21px;
}

.simple-nav-divider {
    background: var(--portal-border) !important;
}


/* =========================================================
   BENUTZERBEREICH SIDEBAR
   ========================================================= */

.simple-sidebar-footer {
    border-top: 1px solid var(--portal-border) !important;
}

.sidebar-user {
    color: var(--portal-ink) !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.simple-topbar {
    position: sticky;
    top: 0;
    z-index: 30;

    background: rgba(245,246,250,.82) !important;
    border-bottom: 1px solid rgba(23,27,46,.055) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.topbar-heading {
    color: var(--portal-ink) !important;
    font-weight: 700;
}

.topbar-avatar {
    box-shadow:
        0 0 0 3px var(--portal-paper),
        0 0 0 4px rgba(71,161,221,.20);
}


/* =========================================================
   INHALT
   ========================================================= */

.simple-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.simple-content > * {
    animation: portalReveal .35s ease both;
}

@keyframes portalReveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   KARTEN / FLÄCHEN
   ========================================================= */

.card,
.panel,
.dashboard-card,
.content-card,
.module-card,
.settings-card,
.profile-card,
.ticket-card,
.calendar-card,
.media-card {
    border-radius: var(--portal-radius) !important;
    border: 1px solid var(--portal-border) !important;
    background: var(--portal-white) !important;
    box-shadow: var(--portal-shadow) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.card:hover,
.dashboard-card:hover,
.module-card:hover,
.media-card:hover {
    border-color: rgba(71,161,221,.16) !important;
    box-shadow: var(--portal-shadow-hover) !important;
}


/* =========================================================
   FORMULARE
   ========================================================= */

input,
select,
textarea {
    font-family: "Inter", sans-serif;
    color: var(--portal-ink);

    border-radius: 11px !important;
    border-color: rgba(23,27,46,.12) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--portal-blue) !important;
    box-shadow:
        0 0 0 3px rgba(71,161,221,.13) !important;
    outline: none !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.button,
.btn {
    font-family: "Inter", sans-serif;
    border-radius: 11px;
}

.btn-primary,
.button-primary,
button.primary {
    border-color: transparent !important;

    background:
        linear-gradient(
            100deg,
            var(--portal-blue),
            var(--portal-violet)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 12px 28px -16px rgba(71,161,221,.85);
}


/* =========================================================
   BADGES / STATUS
   ========================================================= */

.badge,
.status-badge {
    border-radius: 7px !important;
    font-weight: 600;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 18% 78%,
            rgba(71,161,221,.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 22%,
            rgba(124,92,255,.25),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #202857 0%,
            #11152f 48%,
            #080a1c 100%
        ) !important;

    color: #fff;
}

.login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
}


/* großer Torbogen hinter der Anmeldung */
.login-page::before {
    content: "";
    position: fixed;

    width: min(480px, 78vw);
    height: min(600px, 73vh);

    left: 50%;
    top: 50%;

    transform: translate(-50%, -42%);

    border: 2px solid rgba(117,177,235,.26);
    border-bottom: 0;

    border-radius:
        240px 240px 0 0;

    box-shadow:
        0 0 85px rgba(71,161,221,.20),
        inset 0 0 80px rgba(124,92,255,.08);

    pointer-events: none;

    animation:
        portalArchPulse 4.5s ease-in-out infinite;
}

.login-page::after {
    content: "";
    position: fixed;

    width: 340px;
    height: 340px;

    left: 12%;
    bottom: -120px;

    border-radius: 50%;

    background: rgba(71,161,221,.14);
    filter: blur(65px);

    pointer-events: none;

    animation:
        portalGlowDrift 11s ease-in-out infinite alternate;
}

@keyframes portalArchPulse {
    0%, 100% {
        opacity: .72;
        box-shadow:
            0 0 70px rgba(71,161,221,.16),
            inset 0 0 60px rgba(124,92,255,.07);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 105px rgba(71,161,221,.28),
            inset 0 0 85px rgba(124,92,255,.12);
    }
}

@keyframes portalGlowDrift {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(45px,-30px,0);
    }
}

.login-card {
    position: relative;
    z-index: 2;

    background: rgba(255,255,255,.075) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    border-radius: 24px !important;

    box-shadow:
        0 30px 90px -35px rgba(0,0,0,.70),
        inset 0 1px 0 rgba(255,255,255,.055) !important;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.login-card h1,
.login-card h2,
.login-card h3 {
    color: #fff !important;
}

.login-card p,
.login-card label {
    color: #BBC1DF;
}

.login-card .eyebrow {
    font-family: "IBM Plex Mono", monospace;
    color: #76C0F0 !important;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-logo {
    position: relative;

    border-radius:
        50% 50% 12px 12px !important;

    background:
        linear-gradient(
            140deg,
            var(--portal-blue),
            var(--portal-violet)
        ) !important;

    box-shadow:
        0 0 35px rgba(71,161,221,.38);
}

.login-card input {
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.login-card input::placeholder {
    color: rgba(226,230,248,.48);
}

.login-card input:focus {
    border-color: rgba(100,184,238,.75) !important;

    box-shadow:
        0 0 0 3px rgba(71,161,221,.15) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .simple-sidebar {
        box-shadow:
            20px 0 60px -35px rgba(23,27,46,.48);
    }

    .simple-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .simple-topbar {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

@media (max-width: 620px) {

    :root {
        --portal-radius: 14px;
        --portal-radius-lg: 18px;
    }

    .login-card {
        border-radius: 20px !important;
    }

    .login-page::before {
        width: 84vw;
        height: 65vh;
    }

    .simple-content {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   SIHU21TV REDESIGN 2
   Dashboard · Kalender · Nachrichten · Medien · Telefon
   ========================================================= */


/* =========================================================
   GEMEINSAME SEITENÜBERSCHRIFTEN
   ========================================================= */

.simple-page-heading,
.page-heading,
.phone-page-heading {
    position: relative;
    margin-bottom: 28px !important;
}

.simple-page-heading h1,
.page-heading h1,
.phone-page-heading h1,
.simple-dashboard-heading h1 {
    font-family: "Sora", sans-serif !important;
    color: var(--portal-ink) !important;
    font-weight: 750 !important;
    letter-spacing: -.035em;
}

.simple-page-heading p,
.page-heading p,
.phone-page-heading p {
    color: var(--portal-ink-soft) !important;
    line-height: 1.65;
}

.simple-page-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 14px !important;

    color: var(--portal-indigo) !important;

    background:
        linear-gradient(
            145deg,
            rgba(71,161,221,.15),
            rgba(124,92,255,.10)
        ) !important;

    border: 1px solid rgba(71,161,221,.13);

    box-shadow:
        0 12px 26px -20px rgba(46,58,140,.55);
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.simple-dashboard-heading {
    position: relative;
    overflow: hidden;

    margin-bottom: 24px !important;
    padding: 28px 30px !important;

    border-radius: 22px !important;

    color: #fff !important;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(124,92,255,.34),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(71,161,221,.25),
            transparent 34%
        ),
        linear-gradient(
            125deg,
            #202857,
            #2E3A8C 55%,
            #493E98
        ) !important;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 24px 60px -34px rgba(23,27,46,.55);
}

.simple-dashboard-heading::after {
    content: "";
    position: absolute;

    width: 170px;
    height: 210px;

    right: 34px;
    bottom: -98px;

    border:
        1px solid rgba(255,255,255,.20);
    border-bottom: 0;

    border-radius:
        90px 90px 0 0;

    box-shadow:
        0 0 50px rgba(71,161,221,.15);

    pointer-events: none;
}

.simple-dashboard-heading h1 {
    color: #fff !important;
    position: relative;
    z-index: 1;
}

.simple-dashboard-heading p {
    position: relative;
    z-index: 1;
    color: rgba(230,234,251,.78) !important;
}

.simple-dashboard-kicker {
    position: relative;
    z-index: 1;

    font-family: "IBM Plex Mono", monospace !important;

    color: #8FD1FA !important;

    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.simple-dashboard-section {
    margin-top: 22px !important;
}

.simple-dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px !important;

    font-family: "Sora", sans-serif !important;
    color: var(--portal-ink) !important;
    font-weight: 650 !important;
}

.simple-dashboard-event-list,
.simple-news-list {
    display: grid;
    gap: 10px !important;
}

.simple-dashboard-event-list > *,
.simple-news-row {
    border: 1px solid var(--portal-border) !important;
    border-radius: 15px !important;

    background: var(--portal-white) !important;

    box-shadow:
        0 12px 36px -30px rgba(23,27,46,.45);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.simple-dashboard-event-list > *:hover,
.simple-news-row:hover {
    transform: translateY(-2px);

    border-color:
        rgba(71,161,221,.20) !important;

    box-shadow:
        0 18px 42px -28px rgba(23,27,46,.45);
}

.simple-event-date {
    color: var(--portal-indigo) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-weight: 600;
}

.simple-event-time {
    color: var(--portal-ink-faint) !important;
    font-family: "IBM Plex Mono", monospace !important;
}

.simple-event-copy strong,
.simple-news-copy strong,
.simple-task-copy strong {
    color: var(--portal-ink) !important;
}

.simple-event-copy p,
.simple-news-copy p,
.simple-task-copy p {
    color: var(--portal-ink-soft) !important;
}

.simple-news-icon {
    color: var(--portal-blue) !important;

    background:
        rgba(71,161,221,.10) !important;

    border-radius: 12px !important;
}

.simple-task-count {
    color: var(--portal-indigo) !important;

    background:
        linear-gradient(
            135deg,
            rgba(71,161,221,.11),
            rgba(124,92,255,.10)
        ) !important;

    border-radius: 10px !important;
}

.simple-news-open,
.simple-news-read-button {
    border-radius: 10px !important;
}


/* =========================================================
   HUB-SEITEN
   Nachrichten / Medien
   ========================================================= */

.simple-hub-grid {
    display: grid !important;
    gap: 16px !important;
}

.simple-hub-card {
    position: relative;
    overflow: hidden;

    min-height: 150px;

    padding: 22px !important;

    border-radius: 18px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-white) !important;

    box-shadow:
        0 18px 46px -34px rgba(23,27,46,.38) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

.simple-hub-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(71,161,221,.22) !important;

    box-shadow:
        0 26px 55px -33px rgba(23,27,46,.45) !important;
}

.simple-hub-card.is-primary {
    color: #fff !important;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(124,92,255,.32),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #263167,
            #34499B
        ) !important;

    border-color:
        rgba(71,161,221,.18) !important;
}

.simple-hub-card.is-primary h2,
.simple-hub-card.is-primary h3,
.simple-hub-card.is-primary strong {
    color: #fff !important;
}

.simple-hub-card.is-primary p {
    color: rgba(232,235,250,.76) !important;
}

.simple-hub-card .material-symbols-rounded {
    color: var(--portal-blue);
}

.simple-hub-card.is-primary .material-symbols-rounded {
    color: #8DD1FB;
}

.simple-hub-section {
    margin-top: 30px !important;
}

.simple-empty-state {
    padding: 36px !important;

    border-radius: 18px !important;

    color: var(--portal-ink-soft) !important;

    background:
        rgba(236,239,247,.66) !important;

    border:
        1px dashed rgba(75,81,112,.18) !important;
}


/* =========================================================
   KALENDER
   ========================================================= */

.calendar-shell {
    overflow: hidden;

    padding: 22px !important;

    border-radius: 20px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-white) !important;

    box-shadow:
        0 22px 55px -38px rgba(23,27,46,.40) !important;
}

.calendar-page-heading {
    margin-bottom: 22px !important;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px !important;
}

.calendar-month-navigation,
.calendar-view-switch {
    padding: 4px !important;

    border-radius: 12px !important;

    background:
        var(--portal-paper) !important;

    border:
        1px solid var(--portal-border) !important;
}

.calendar-view-switch a,
.calendar-month-navigation a {
    border-radius: 9px !important;

    color:
        var(--portal-ink-soft) !important;

    transition:
        background .18s ease,
        color .18s ease;
}

.calendar-view-switch .is-active {
    color: #fff !important;

    background:
        var(--portal-ink) !important;

    box-shadow:
        0 8px 20px -14px rgba(23,27,46,.65);
}

.calendar-today-button {
    border-radius: 10px !important;
}

.calendar-month-grid {
    gap: 6px !important;

    background: transparent !important;
}

.calendar-weekday {
    padding: 8px 6px !important;

    color:
        var(--portal-ink-faint) !important;

    font-family:
        "IBM Plex Mono", monospace !important;

    font-size: 10px !important;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.calendar-day {
    min-height: 104px;

    border-radius: 12px !important;

    border:
        1px solid rgba(23,27,46,.065) !important;

    background:
        #fff !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.calendar-day:hover {
    transform: translateY(-1px);

    border-color:
        rgba(71,161,221,.25) !important;

    background:
        rgba(71,161,221,.025) !important;
}

.calendar-day.is-outside {
    background:
        rgba(245,246,250,.68) !important;

    opacity: .55;
}

.calendar-day.is-today {
    border:
        2px solid rgba(124,92,255,.68) !important;

    box-shadow:
        0 0 0 3px rgba(124,92,255,.07);
}

.calendar-day-number {
    font-family:
        "IBM Plex Mono", monospace !important;

    color:
        var(--portal-ink-soft) !important;
}

.calendar-day.is-today .calendar-day-number {
    color:
        var(--portal-violet) !important;

    font-weight: 700;
}

.calendar-event-chip {
    border: 0 !important;

    border-radius: 7px !important;

    color:
        var(--portal-indigo) !important;

    background:
        rgba(71,161,221,.11) !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}

.calendar-event-chip.is-team {
    color:
        #5940BD !important;

    background:
        rgba(124,92,255,.11) !important;
}

.calendar-more-events {
    color:
        var(--portal-ink-faint) !important;

    font-size: 10px !important;
}

.calendar-event-list {
    display: grid;
    gap: 12px !important;
}

.calendar-event-card {
    border:
        1px solid var(--portal-border) !important;

    border-radius: 16px !important;

    background:
        var(--portal-white) !important;

    box-shadow:
        0 14px 40px -34px rgba(23,27,46,.42) !important;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.calendar-event-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(71,161,221,.22) !important;
}

.calendar-event-date-block {
    border-radius: 11px !important;

    color:
        var(--portal-indigo) !important;

    background:
        linear-gradient(
            145deg,
            rgba(71,161,221,.12),
            rgba(124,92,255,.07)
        ) !important;
}

.calendar-event-description,
.calendar-event-meta,
.calendar-own-response-time {
    color:
        var(--portal-ink-soft) !important;
}

.calendar-response-actions {
    gap: 7px !important;
}

.calendar-response-actions button {
    border-radius: 9px !important;
}

.calendar-response-actions .is-yes,
.calendar-response-summary .is-yes {
    color:
        var(--portal-success) !important;
}

.calendar-response-actions .is-no,
.calendar-response-summary .is-no {
    color:
        var(--portal-danger) !important;
}

.calendar-participants {
    border-top:
        1px solid var(--portal-border) !important;
}

.calendar-participant-group {
    border-radius: 12px !important;

    background:
        var(--portal-paper) !important;
}


/* =========================================================
   TELEFON
   ========================================================= */

.phone-page {
    color:
        var(--portal-ink) !important;
}

.phone-layout {
    gap: 16px !important;
}

.phone-panel {
    overflow: hidden;

    border-radius:
        18px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-white) !important;

    box-shadow:
        0 18px 48px -36px rgba(23,27,46,.42) !important;
}

.phone-panel-header {
    padding-bottom:
        14px !important;

    border-bottom:
        1px solid var(--portal-border) !important;
}

.phone-panel-header h2,
.phone-panel-header h3 {
    font-family:
        "Sora", sans-serif !important;

    color:
        var(--portal-ink) !important;
}

.phone-eyebrow {
    font-family:
        "IBM Plex Mono", monospace !important;

    color:
        var(--portal-blue) !important;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.phone-search {
    border-radius:
        11px !important;

    background:
        var(--portal-paper) !important;

    border:
        1px solid var(--portal-border) !important;
}

.phone-contact-list,
.phone-history-list {
    display: grid;
    gap: 6px !important;
}

.phone-contact-list > *,
.phone-history-list > * {
    border-radius:
        12px !important;

    transition:
        background .17s ease,
        transform .17s ease;
}

.phone-contact-list > *:hover,
.phone-history-list > *:hover {
    background:
        rgba(71,161,221,.06) !important;

    transform:
        translateX(2px);
}

.phone-status-dot {
    box-shadow:
        0 0 0 3px rgba(63,174,134,.10);
}

.phone-icon-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50% !important;

    transition:
        transform .18s ease,
        background .18s ease;
}

.phone-icon-button:hover {
    transform:
        scale(1.05);
}

.phone-information {
    color:
        var(--portal-ink-soft) !important;

    background:
        rgba(71,161,221,.065) !important;

    border:
        1px solid rgba(71,161,221,.10) !important;

    border-radius:
        12px !important;
}

.phone-connection-state {
    border-radius:
        16px !important;

    background:
        linear-gradient(
            145deg,
            #202857,
            #121630
        ) !important;

    color:
        #fff !important;
}

.phone-loading-state {
    color:
        var(--portal-ink-soft) !important;
}


/* =========================================================
   BUTTON-KONSISTENZ
   ========================================================= */

.primary-button {
    border:
        0 !important;

    border-radius:
        11px !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            100deg,
            var(--portal-blue),
            var(--portal-violet)
        ) !important;

    box-shadow:
        0 13px 28px -18px rgba(71,161,221,.85) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.primary-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 18px 34px -18px rgba(71,161,221,.95) !important;
}

.secondary-button,
.icon-button {
    border:
        1px solid var(--portal-border) !important;

    border-radius:
        10px !important;

    color:
        var(--portal-ink-soft) !important;

    background:
        #fff !important;
}


/* =========================================================
   STATUSMELDUNGEN
   ========================================================= */

.account-message,
.state {
    border-radius:
        12px !important;

    border:
        1px solid transparent !important;

    box-shadow:
        none !important;
}

.account-success,
.state-success {
    color:
        #216D55 !important;

    background:
        rgba(63,174,134,.10) !important;

    border-color:
        rgba(63,174,134,.17) !important;
}

.account-error,
.state-danger {
    color:
        #A83D50 !important;

    background:
        rgba(224,85,107,.10) !important;

    border-color:
        rgba(224,85,107,.17) !important;
}

.state-info {
    color:
        #246F9D !important;

    background:
        rgba(71,161,221,.10) !important;

    border-color:
        rgba(71,161,221,.16) !important;
}

.state-neutral {
    color:
        var(--portal-ink-soft) !important;

    background:
        var(--portal-paper) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .simple-dashboard-heading {
        padding:
            24px !important;
    }

    .simple-dashboard-heading::after {
        right:
            20px;
    }

    .calendar-shell {
        padding:
            16px !important;
    }
}

@media (max-width: 760px) {

    .simple-dashboard-heading {
        border-radius:
            18px !important;

        padding:
            22px 18px !important;
    }

    .simple-dashboard-heading::after {
        width:
            130px;

        height:
            170px;

        right:
            -20px;

        bottom:
            -100px;
    }

    .simple-hub-card {
        min-height:
            auto;

        padding:
            18px !important;
    }

    .calendar-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .calendar-month-grid {
        min-width:
            680px;
    }

    .calendar-shell {
        overflow-x:
            auto;
    }

    .calendar-day {
        min-height:
            92px;
    }

    .phone-layout {
        grid-template-columns:
            1fr !important;
    }
}

@media (max-width: 520px) {

    .simple-dashboard-heading {
        padding:
            20px 16px !important;
    }

    .simple-dashboard-event-list,
    .simple-news-list {
        gap:
            8px !important;
    }

    .calendar-shell {
        border-radius:
            14px !important;
    }

    .phone-panel {
        border-radius:
            14px !important;
    }
}


/* =========================================================
   SIHU21TV PORTAL REDESIGN 3
   Verwaltung · Gruppen · Mitglieder · Profil
   Support · Benachrichtigungen · Notruf
   ========================================================= */


/* =========================================================
   ALLGEMEINE VERWALTUNGSSEITEN
   ========================================================= */

[class*="admin-page"],
[class*="settings-page"],
[class*="profile-page"],
[class*="support-page"],
[class*="notification-page"],
[class*="members-page"],
[class*="group-page"] {
    color: var(--portal-ink);
}

[class*="admin"][class*="panel"],
[class*="settings"][class*="panel"],
[class*="profile"][class*="panel"],
[class*="support"][class*="panel"],
[class*="member"][class*="panel"],
[class*="group"][class*="panel"] {
    border-radius: 18px !important;
    border: 1px solid var(--portal-border) !important;
    background: var(--portal-white) !important;
    box-shadow:
        0 18px 48px -36px rgba(23,27,46,.42) !important;
}


/* =========================================================
   SEITENHEADING
   ========================================================= */

[class*="admin"] .page-heading,
[class*="group"] .page-heading,
[class*="profile"] .page-heading,
[class*="support"] .page-heading,
[class*="notification"] .page-heading,
[class*="member"] .page-heading {
    margin-bottom: 26px !important;
}

.page-heading .eyebrow,
[class*="heading"] .eyebrow {
    font-family: "IBM Plex Mono", monospace !important;
    color: var(--portal-blue) !important;

    font-size: 11px !important;
    letter-spacing: .11em;
    text-transform: uppercase;
}


/* =========================================================
   VERWALTUNGS-HUB
   ========================================================= */

[class*="admin-grid"],
[class*="management-grid"],
[class*="settings-grid"],
[class*="group-grid"] {
    gap: 16px !important;
}

[class*="admin-card"],
[class*="management-card"],
[class*="settings-card"],
[class*="group-card"] {
    position: relative;

    border-radius: 17px !important;
    border: 1px solid var(--portal-border) !important;

    background: #fff !important;

    box-shadow:
        0 16px 44px -34px rgba(23,27,46,.42) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease !important;
}

[class*="admin-card"]:hover,
[class*="management-card"]:hover,
[class*="settings-card"]:hover,
[class*="group-card"]:hover {
    transform: translateY(-3px);

    border-color:
        rgba(71,161,221,.20) !important;

    box-shadow:
        0 24px 52px -32px rgba(23,27,46,.45) !important;
}


/* =========================================================
   MODULE / EIN-AUS-SCHALTER
   ========================================================= */

[class*="module-row"],
[class*="module-item"],
[class*="setting-row"] {
    border-radius: 14px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-white) !important;

    transition:
        border-color .18s ease,
        background .18s ease;
}

[class*="module-row"]:hover,
[class*="module-item"]:hover,
[class*="setting-row"]:hover {
    border-color:
        rgba(71,161,221,.20) !important;

    background:
        rgba(71,161,221,.025) !important;
}

[class*="toggle"],
.switch {
    transition:
        background .2s ease,
        box-shadow .2s ease;
}

[class*="toggle"].is-active,
[class*="toggle"].is-on,
[class*="toggle"].on,
.switch:has(input:checked) {
    background:
        var(--portal-blue) !important;

    box-shadow:
        0 6px 18px -11px rgba(71,161,221,.8);
}


/* =========================================================
   MITGLIEDER
   ========================================================= */

[class*="member-grid"],
[class*="members-grid"] {
    display: grid !important;
    gap: 12px !important;

    grid-template-columns:
        repeat(auto-fill, minmax(210px, 1fr));
}

[class*="member-card"] {
    border-radius: 16px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-white) !important;

    box-shadow:
        0 14px 40px -34px rgba(23,27,46,.42) !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

[class*="member-card"]:hover {
    transform: translateY(-3px);

    border-color:
        rgba(71,161,221,.22) !important;

    box-shadow:
        0 22px 50px -32px rgba(23,27,46,.46) !important;
}

[class*="member-avatar"],
[class*="profile-avatar"] {
    box-shadow:
        0 0 0 4px var(--portal-paper),
        0 0 0 5px rgba(71,161,221,.16) !important;
}

[class*="member-role"],
[class*="role-badge"] {
    border-radius: 7px !important;

    color:
        var(--portal-indigo) !important;

    background:
        rgba(71,161,221,.10) !important;

    font-weight:
        600 !important;
}


/* =========================================================
   PROFIL / KONTO
   ========================================================= */

[class*="account-section"],
[class*="profile-section"],
[class*="security-section"],
[class*="settings-section"] {
    border-radius: 17px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        #fff !important;

    box-shadow:
        0 16px 44px -36px rgba(23,27,46,.38) !important;
}

[class*="profile-header"],
[class*="account-header"] {
    position: relative;
    overflow: hidden;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            125deg,
            rgba(71,161,221,.10),
            rgba(124,92,255,.07)
        ) !important;

    border:
        1px solid rgba(71,161,221,.10) !important;
}


/* =========================================================
   GRUPPENWECHSEL AUF PROFILSEITEN
   ========================================================= */

[class*="group-switch"],
[class*="group-selector"] {
    gap: 8px !important;
}

[class*="group-switch"] button,
[class*="group-selector"] button,
[class*="group-chip"] {
    border-radius: 10px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        var(--portal-paper) !important;

    color:
        var(--portal-ink-soft) !important;
}

[class*="group-chip"].is-active,
[class*="group-chip"].active {
    color:
        #fff !important;

    background:
        var(--portal-ink) !important;
}


/* =========================================================
   SUPPORT
   ========================================================= */

[class*="ticket-list"] {
    display: grid;
    gap: 8px !important;
}

[class*="ticket-row"],
[class*="ticket-card"],
[class*="support-ticket"] {
    border-radius:
        14px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        #fff !important;

    box-shadow:
        0 12px 36px -32px rgba(23,27,46,.40);

    transition:
        transform .18s ease,
        border-color .18s ease;
}

[class*="ticket-row"]:hover,
[class*="ticket-card"]:hover,
[class*="support-ticket"]:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(71,161,221,.20) !important;
}

[class*="ticket-id"] {
    font-family:
        "IBM Plex Mono", monospace !important;

    color:
        var(--portal-ink-faint) !important;
}


/* =========================================================
   BENACHRICHTIGUNGEN
   ========================================================= */

[class*="notification-list"],
[class*="notifications-list"] {
    display:
        grid;

    gap:
        8px !important;
}

[class*="notification-item"],
[class*="notification-row"],
[class*="notif-row"] {
    position: relative;

    border-radius:
        14px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        #fff !important;

    box-shadow:
        0 10px 34px -30px rgba(23,27,46,.36);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

[class*="notification-item"]:hover,
[class*="notification-row"]:hover,
[class*="notif-row"]:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(71,161,221,.18) !important;
}

[class*="notification-item"].is-unread,
[class*="notification-row"].is-unread,
[class*="notif-row"].is-unread {
    background:
        linear-gradient(
            90deg,
            rgba(71,161,221,.065),
            rgba(255,255,255,1) 45%
        ) !important;
}


/* =========================================================
   INTERNE NOTRUFSEITE
   Signatur-Ausnahme
   ========================================================= */

[class*="care-alarm"],
[class*="emergency-page"],
[class*="alarm-page"] {
    --alarm-red: #E0556B;
}

[class*="alarm"][class*="hero"],
[class*="emergency"][class*="hero"],
[class*="care-alarm"][class*="panel"] {
    position: relative;
    overflow: hidden;

    color:
        #fff !important;

    border-radius:
        22px !important;

    border:
        1px solid rgba(224,85,107,.20) !important;

    background:
        radial-gradient(
            circle at 50% 34%,
            rgba(224,85,107,.28),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #371429,
            #1A1029
        ) !important;

    box-shadow:
        0 30px 75px -40px rgba(77,18,43,.65) !important;
}

[class*="sos"],
[class*="alarm-button"],
[class*="emergency-button"] {
    position:
        relative;

    border-radius:
        999px !important;

    border:
        0 !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            145deg,
            #ED647C,
            #C63F59
        ) !important;

    box-shadow:
        0 0 0 0 rgba(224,85,107,.42);

    animation:
        sihuSosPulse 1.85s ease-out infinite;
}

@keyframes sihuSosPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(224,85,107,.42);
    }

    68% {
        box-shadow:
            0 0 0 24px rgba(224,85,107,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(224,85,107,0);
    }
}


/* =========================================================
   TABELLEN
   weniger Enterprise-Look
   ========================================================= */

table {
    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    width:
        100%;
}

table thead th {
    font-family:
        "IBM Plex Mono", monospace !important;

    font-size:
        10px !important;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;

    color:
        var(--portal-ink-faint) !important;

    background:
        var(--portal-paper) !important;

    border-bottom:
        1px solid var(--portal-border) !important;
}

table tbody td {
    border-bottom:
        1px solid rgba(23,27,46,.055) !important;
}

table tbody tr {
    transition:
        background .16s ease;
}

table tbody tr:hover {
    background:
        rgba(71,161,221,.035) !important;
}


/* =========================================================
   DIALOGE / MODALS
   ========================================================= */

dialog,
.modal,
[class*="modal-content"],
[class*="dialog-card"] {
    border-radius:
        20px !important;

    border:
        1px solid rgba(23,27,46,.10) !important;

    background:
        #fff !important;

    box-shadow:
        0 30px 90px -35px rgba(23,27,46,.55) !important;
}

dialog::backdrop,
.modal-backdrop {
    background:
        rgba(16,19,37,.42) !important;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

fieldset,
.form-section,
[class*="form-section"] {
    border-radius:
        15px !important;

    border:
        1px solid var(--portal-border) !important;

    background:
        #fff !important;
}


/* =========================================================
   DANGER BUTTONS
   ========================================================= */

.danger-button,
.btn-danger,
button.danger,
[class*="delete-button"] {
    color:
        #A9374C !important;

    background:
        rgba(224,85,107,.09) !important;

    border:
        1px solid rgba(224,85,107,.18) !important;

    border-radius:
        10px !important;
}

.danger-button:hover,
.btn-danger:hover,
button.danger:hover,
[class*="delete-button"]:hover {
    color:
        #fff !important;

    background:
        var(--portal-danger) !important;
}


/* =========================================================
   SCROLLBAR – subtil
   ========================================================= */

@media (pointer: fine) {

    * {
        scrollbar-width:
            thin;

        scrollbar-color:
            rgba(75,81,112,.28)
            transparent;
    }

    *::-webkit-scrollbar {
        width:
            8px;

        height:
            8px;
    }

    *::-webkit-scrollbar-thumb {
        border-radius:
            99px;

        background:
            rgba(75,81,112,.22);
    }
}


/* =========================================================
   MOBILE FINAL
   ========================================================= */

@media (max-width: 760px) {

    [class*="member-grid"],
    [class*="members-grid"] {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    [class*="admin-grid"],
    [class*="management-grid"],
    [class*="settings-grid"],
    [class*="group-grid"] {
        grid-template-columns:
            1fr !important;
    }

    table {
        font-size:
            13px;
    }
}

@media (max-width: 480px) {

    [class*="member-grid"],
    [class*="members-grid"] {
        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   SIHU21TV_JOBS_MANAGEMENT_V1
   ========================================================== */


.jobs-admin-section {
    margin-top: 34px;
}


.jobs-admin-heading,
.jobs-admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
}


.jobs-admin-heading {
    margin-bottom: 18px;
}


.jobs-admin-heading h2 {
    margin: 4px 0 7px;
}


.jobs-admin-heading p {
    max-width: 690px;
    margin: 0;
    color: #6B6B6B;
    line-height: 1.55;
}


.jobs-admin-kicker {
    color: #6B6B6B;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}


.jobs-admin-public-link,
.jobs-admin-primary,
.jobs-admin-publish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;

    padding: 0 15px;

    border: 0;
    border-radius: 12px;

    font: inherit;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}


.jobs-admin-public-link {
    color: #2E82BE;
    background: #E8F3FB;
}


.jobs-admin-primary,
.jobs-admin-publish {
    color: #FFFFFF;
    background: #47A1DD;
}


.jobs-admin-publish.is-unpublish {
    color: #444444;
    background: #F1F1EF;
}


.jobs-admin-flash {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 16px;

    padding: 12px 14px;

    border: 1px solid #D7EBDD;
    border-radius: 12px;

    background: #F3FAF5;
}


.jobs-admin-create,
.jobs-admin-card,
.jobs-admin-empty {
    border: 1px solid #EBEBEB;
    border-radius: 18px;

    background: #FFFFFF;
}


.jobs-admin-create {
    margin-bottom: 18px;
    overflow: hidden;
}


.jobs-admin-create > summary,
.jobs-admin-edit > summary {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 16px 18px;

    font-weight: 700;

    cursor: pointer;
    list-style: none;
}


.jobs-admin-create > summary::-webkit-details-marker,
.jobs-admin-edit > summary::-webkit-details-marker {
    display: none;
}


.jobs-admin-form {
    padding: 4px 18px 20px;
}


.jobs-admin-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


.jobs-admin-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.jobs-admin-wide {
    grid-column: 1 / -1;
}


.jobs-admin-field > span {
    color: #444444;

    font-size: .8rem;
    font-weight: 700;
}


.jobs-admin-field input,
.jobs-admin-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    color: #222222;
    background: #FFFFFF;

    border: 1px solid #DCDCDC;
    border-radius: 11px;

    font: inherit;
}


.jobs-admin-field textarea {
    resize: vertical;
    line-height: 1.5;
}


.jobs-admin-field input:focus,
.jobs-admin-field textarea:focus {
    outline: 2px solid #E8F3FB;
    border-color: #47A1DD;
}


.jobs-admin-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 16px;
}


.jobs-admin-list {
    display: grid;
    gap: 16px;
}


.jobs-admin-empty {
    padding: 32px 22px;
    text-align: center;
}


.jobs-admin-empty > .material-symbols-rounded {
    margin-bottom: 8px;

    color: #8A8A8A;

    font-size: 34px;
}


.jobs-admin-empty strong {
    display: block;
}


.jobs-admin-empty p {
    margin: 5px 0 0;
    color: #6B6B6B;
}


.jobs-admin-card {
    padding: 18px;
}


.jobs-admin-card h3 {
    margin: 8px 0;
}


.jobs-admin-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #6B6B6B;

    font-size: .75rem;
    font-weight: 700;
}


.jobs-admin-status i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #999999;
}


.jobs-admin-card.is-published .jobs-admin-status i {
    background: #3A9B5F;
}


.jobs-admin-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 14px;

    color: #6B6B6B;

    font-size: .8rem;
}


.jobs-admin-edit {
    margin-top: 15px;

    border-top: 1px solid #EBEBEB;
}


.jobs-admin-edit > summary {
    padding-left: 0;
    padding-right: 0;
}


.jobs-admin-delete-form {
    display: flex;
    justify-content: flex-end;

    margin-top: 6px;
}


.jobs-admin-delete {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 8px 10px;

    color: #A23B3B;

    background: transparent;

    border: 0;

    font: inherit;
    font-size: .8rem;
    font-weight: 600;

    cursor: pointer;
}


@media (max-width: 720px) {

    .jobs-admin-heading,
    .jobs-admin-card-head {
        flex-direction: column;
    }


    .jobs-admin-form-grid {
        grid-template-columns: 1fr;
    }


    .jobs-admin-wide {
        grid-column: auto;
    }


    .jobs-admin-public-link,
    .jobs-admin-publish {
        width: 100%;
        box-sizing: border-box;
    }

}


/* /SIHU21TV_JOBS_MANAGEMENT_V1 */