/* Gemeinsame Anpassungen des UKW-Designsystems für die beiden Blazor-Portale. */
:root {
    --ukw-control-border: #a6b5ce;
    --ukw-focus: #1b50b2;
    --ukw-hero-bg: linear-gradient(125deg, #02246c, #1b50b2 72%, #123661);
    --ukw-glass-blur: 1.5rem;
    --neutral-layer-1: var(--ukw-surface-solid);
    --neutral-layer-2: var(--ukw-surface-solid);
    --neutral-layer-3: var(--ukw-surface-solid);
    --neutral-layer-4: var(--ukw-surface-solid);
    --neutral-fill-layer-rest: var(--ukw-surface-solid);
    --neutral-fill-input-rest: var(--ukw-surface-strong);
    --neutral-fill-input-hover: var(--ukw-surface-solid);
    --neutral-fill-input-focus: var(--ukw-surface-solid);
    --neutral-foreground-rest: var(--ukw-text);
    --neutral-stroke-rest: var(--ukw-control-border);
    --accent-fill-rest: #02246c;
    --accent-fill-hover: #1b50b2;
    --accent-fill-active: #123661;
    --foreground-on-accent-rest: #fff;
}

[data-bs-theme="dark"] {
    --ukw-control-border: #617a9c;
    --ukw-focus: #80bbff;
    --ukw-hero-bg: linear-gradient(125deg, #06142c, #123661 72%, #02246c);
    --accent-fill-rest: #80bbff;
    --accent-fill-hover: #b5daff;
    --accent-fill-active: #80bbff;
    --foreground-on-accent-rest: #020817;
}

html {
    min-height: 100%;
    scroll-padding-top: 7rem;
}

body {
    min-width: 0;
    min-height: 100vh;
    font-family: var(--bs-font-sans-serif);
    color: var(--ukw-text);
    background-attachment: fixed;
}

main, article, section, .app-main {
    min-width: 0;
}

a, .btn-link {
    color: var(--bs-link-color);
}

a:hover, .btn-link:hover {
    color: var(--bs-link-hover-color);
}

:focus-visible,
h1:focus-visible {
    outline: .2rem solid var(--ukw-focus);
    outline-offset: .2rem;
}

#main-content {
    scroll-margin-top: 7rem;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 21000;
    color: #fff;
    background: #02246c;
    border-radius: .75rem;
    transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus {
    top: .75rem;
    color: #fff;
    transform: translateY(0);
}

.ukw-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: #fff;
    background: var(--ukw-hero-bg);
    border: 1px solid rgba(128, 187, 255, .35);
    border-radius: var(--ukw-radius);
    box-shadow: var(--ukw-shadow);
}

.ukw-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(147, 237, 172, .18), transparent 55%),
        radial-gradient(ellipse at 10% 100%, rgba(255, 160, 160, .16), transparent 55%);
    content: "";
    pointer-events: none;
}

.ukw-hero :is(h1, h2, h3) {
    color: #fff;
}

.ukw-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .4rem .8rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50rem;
}

.theme-toggle {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.btn-outline-info {
    --bs-btn-color: #1b50b2;
    --bs-btn-border-color: #1b50b2;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #dad0d1;
    --bs-btn-border-color: #dad0d1;
    --bs-btn-hover-color: #020817;
    --bs-btn-hover-bg: #dad0d1;
    --bs-btn-hover-border-color: #dad0d1;
    --bs-btn-active-color: #020817;
    --bs-btn-active-bg: #dad0d1;
    --bs-btn-active-border-color: #dad0d1;
    --bs-btn-disabled-color: #dad0d1;
    --bs-btn-disabled-border-color: #dad0d1;
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #93edac;
    --bs-btn-border-color: #93edac;
    --bs-btn-hover-color: #020817;
    --bs-btn-hover-bg: #93edac;
    --bs-btn-hover-border-color: #93edac;
    --bs-btn-active-color: #020817;
    --bs-btn-active-bg: #93edac;
    --bs-btn-active-border-color: #93edac;
    --bs-btn-disabled-color: #93edac;
    --bs-btn-disabled-border-color: #93edac;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ffa0a0;
    --bs-btn-border-color: #ffa0a0;
    --bs-btn-hover-color: #020817;
    --bs-btn-hover-bg: #ffa0a0;
    --bs-btn-hover-border-color: #ffa0a0;
    --bs-btn-active-color: #020817;
    --bs-btn-active-bg: #ffa0a0;
    --bs-btn-active-border-color: #ffa0a0;
    --bs-btn-disabled-color: #ffa0a0;
    --bs-btn-disabled-border-color: #ffa0a0;
}

[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: #b5daff;
    --bs-btn-border-color: #b5daff;
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #f5edee;
    --bs-btn-border-color: #f5edee;
    --bs-btn-hover-color: #020817;
    --bs-btn-hover-bg: #f5edee;
    --bs-btn-hover-border-color: #f5edee;
    --bs-btn-active-color: #020817;
    --bs-btn-active-bg: #f5edee;
    --bs-btn-active-border-color: #f5edee;
}

.card {
    --bs-card-color: var(--ukw-text);
    --bs-card-bg: var(--ukw-surface);
    --bs-card-border-color: var(--ukw-border);
    --bs-card-border-radius: var(--ukw-radius);
    --bs-card-inner-border-radius: calc(var(--ukw-radius) - 1px);
    --bs-card-cap-bg: var(--ukw-surface);
    --bs-card-cap-color: var(--ukw-text);
    background-image: linear-gradient(135deg, var(--ukw-shine), transparent 65%);
    box-shadow: var(--ukw-shadow-soft);
    -webkit-backdrop-filter: blur(var(--ukw-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--ukw-glass-blur)) saturate(140%);
}

.list-group {
    --bs-list-group-color: var(--ukw-text);
    --bs-list-group-bg: var(--ukw-surface);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-action-color: var(--ukw-text);
    --bs-list-group-action-hover-color: var(--ukw-text);
    --bs-list-group-action-hover-bg: var(--bs-primary-bg-subtle);
    --bs-list-group-action-active-bg: var(--bs-primary-bg-subtle);
}

.form-label, .form-check-label {
    color: var(--ukw-text);
}

.form-control, .form-select, .input-group-text {
    color: var(--ukw-text);
    background-color: var(--ukw-surface-strong);
    border-color: var(--ukw-control-border);
    border-radius: .75rem;
}

.form-control:focus, .form-select:focus {
    color: var(--ukw-text);
    background-color: var(--ukw-surface-solid);
    border-color: var(--ukw-focus);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-control::placeholder {
    color: var(--ukw-muted);
    opacity: 1;
}

.form-control:disabled, .form-select:disabled {
    color: var(--ukw-muted);
    background-color: var(--bs-tertiary-bg);
}

.form-check-input:not(:checked) {
    background-color: var(--ukw-surface-solid);
    border-color: var(--ukw-control-border);
}

.form-check-input:checked {
    background-color: #1b50b2;
    border-color: var(--ukw-focus);
}

.form-text, .text-muted {
    color: var(--ukw-muted) !important;
}

.valid.modified:not([type="checkbox"]) {
    outline-color: var(--bs-form-valid-color);
}

.invalid {
    outline: 2px solid var(--bs-form-invalid-color);
}

.validation-message {
    color: var(--bs-form-invalid-color);
}

.table {
    --bs-table-color: var(--ukw-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-color: var(--ukw-text);
    --bs-table-striped-bg: rgba(var(--bs-primary-rgb), .04);
    --bs-table-hover-color: var(--ukw-text);
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .08);
    --bs-table-active-color: var(--ukw-text);
    --bs-table-active-bg: rgba(var(--bs-primary-rgb), .12);
    vertical-align: middle;
}

.table-light {
    --bs-table-color: var(--ukw-text);
    --bs-table-bg: var(--ukw-surface-solid);
    --bs-table-border-color: var(--bs-border-color);
}

.table > thead {
    color: var(--ukw-muted);
    background: var(--ukw-surface-strong);
}

.table-responsive {
    border-radius: 1rem;
}

.modal-content, .dropdown-menu, .offcanvas {
    color: var(--ukw-text);
    background: var(--ukw-surface-strong);
    border-color: var(--bs-border-color);
    box-shadow: var(--ukw-shadow);
    -webkit-backdrop-filter: blur(var(--ukw-glass-blur));
    backdrop-filter: blur(var(--ukw-glass-blur));
}

.modal-content {
    border-radius: var(--ukw-radius);
}

.dropdown-menu {
    --bs-dropdown-color: var(--ukw-text);
    --bs-dropdown-link-color: var(--ukw-text);
    --bs-dropdown-link-hover-color: var(--ukw-text);
    --bs-dropdown-link-hover-bg: var(--bs-primary-bg-subtle);
}

.accordion {
    --bs-accordion-color: var(--ukw-text);
    --bs-accordion-bg: var(--ukw-surface);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-color: var(--ukw-text);
    --bs-accordion-btn-bg: var(--ukw-surface);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--ukw-surface);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-hover-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-disabled-bg: var(--ukw-surface-solid);
}

.reconnect-card {
    color: var(--ukw-text);
    background: var(--ukw-surface-solid);
    border: 1px solid var(--ukw-border);
    border-radius: var(--ukw-radius);
    box-shadow: var(--ukw-shadow);
}

.reconnect-attempt {
    color: var(--ukw-muted);
}

.reconnect-spinner {
    border-color: var(--bs-primary-border-subtle);
    border-top-color: var(--bs-primary);
}

#blazor-error-ui {
    padding-right: 3.5rem;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-top: 1px solid var(--bs-danger-border-subtle);
    box-shadow: var(--ukw-shadow-soft);
    z-index: 21000;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--ukw-surface-solid) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--ukw-text) !important;
}

[data-bs-theme="dark"] :is(.text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-info, .text-bg-danger),
[data-bs-theme="dark"] .badge:is(.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-danger) {
    color: #020817 !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --ukw-surface: var(--ukw-surface-solid);
        --ukw-surface-strong: var(--ukw-surface-solid);
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --ukw-surface: var(--ukw-surface-solid);
        --ukw-surface-strong: var(--ukw-surface-solid);
        --ukw-glass-blur: 0px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html, html:focus-within {
        scroll-behavior: auto;
    }

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

@media (forced-colors: active) {
    .glass-panel, .card, .ukw-hero {
        border: 1px solid CanvasText;
    }
}

@media print {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    :root, [data-bs-theme="dark"] {
        color-scheme: light;
        --ukw-text: #000;
        --ukw-muted: #333;
        --ukw-surface: #fff;
        --ukw-surface-strong: #fff;
        --ukw-surface-solid: #fff;
        --ukw-page-bg: #fff;
        --ukw-border: #aaa;
        --bs-body-color: #000;
        --bs-body-bg: #fff;
        --bs-border-color: #aaa;
    }

    body {
        color: #000 !important;
        background: #fff !important;
    }

    .theme-toggle, .skip-link, #blazor-error-ui, #components-reconnect-modal {
        display: none !important;
    }

    .card, .glass-panel, .ukw-hero {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .ukw-hero::before {
        display: none;
    }

    .ukw-hero :is(h1, h2, h3) {
        color: #000 !important;
    }
}