:root {
    --jn-accent: #174a7e;
    --jn-accent-dark: #0f355d;
    --jn-accent-soft: rgba(23,74,126,.14);
    --jn-glass: rgba(255,255,255,.62);
    --jn-glass-strong: rgba(255,255,255,.78);
    --jn-glass-line: rgba(255,255,255,.64);
    --jn-text-main: #111c2e;
    --jn-text-muted: #667085;
    --jn-soft-shadow: 0 24px 70px rgba(66,48,32,.10);
}
body[data-theme="night"] {
    --jn-glass: rgba(23,31,43,.62);
    --jn-glass-strong: rgba(23,31,43,.78);
    --jn-glass-line: rgba(255,255,255,.10);
    --jn-text-main: #eef2f6;
    --jn-text-muted: #bdc7d2;
    --jn-soft-shadow: 0 28px 76px rgba(0,0,0,.26);
}
body.jn-app-page,
body.admin-page,
body.auth-clean-page {
    color: var(--jn-text-main);
}
body.jn-app-page::after,
body.admin-page::after,
body.auth-clean-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(248,244,239,.82), rgba(248,244,239,.92)),
        var(--jn-page-bg-day);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: translateZ(0);
}
body[data-theme="night"].jn-app-page::after,
body[data-theme="night"].admin-page::after,
body[data-theme="night"].auth-clean-page::after {
    background-image:
        linear-gradient(180deg, rgba(16,23,32,.84), rgba(16,23,32,.94)),
        var(--jn-page-bg-night);
}
.jn-sidebar,
.admin-tabs,
.admin-card,
.dashboard-action-card,
.dashboard-recent-card,
.jn-insight-card,
.support-action-card,
.support-tickets-card,
.settings-option-card,
.jn-article-card,
.jn-upgrade-hero,
.support-hero-card,
.settings-hero-card,
.dashboard-hero-card {
    border-color: var(--jn-glass-line) !important;
    box-shadow: var(--jn-soft-shadow), inset 0 1px 0 rgba(255,255,255,.46) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}
.jn-side-brand span,
.nav-icon.active,
.dashboard-kicker,
.settings-kicker,
.support-kicker,
.jn-upgrade-hero p,
.admin-eyebrow,
.bc-copy-kicker,
.bc-meta-pill,
.support-card-head button,
.settings-dialog-head p,
.support-dialog-head p,
.jn-article-category,
.jn-article-number i,
.dashboard-action-link,
.support-action-card em,
.settings-option-card em {
    color: var(--jn-accent-dark) !important;
}
.jn-side-nav a.active,
.bc-tag-chip.active,
.support-status-pill,
.settings-theme-options label.active,
.settings-accent-options label.active,
.admin-tabs a:hover,
.btn.soft,
.line-button.primary-soft {
    background: var(--jn-accent-soft) !important;
    color: var(--jn-accent-dark) !important;
}
.solid-action,
.support-primary-button,
.settings-primary-button,
.btn.primary {
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.settings-accent-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.settings-accent-options label {
    min-height: 84px;
    border: 1px solid rgba(15,39,71,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.56);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    cursor: pointer;
}
.settings-accent-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.settings-accent-options span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-preview), var(--accent-preview-dark));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 22px rgba(0,0,0,.10);
}
.settings-accent-options strong {
    font-size: 13px;
}
.design-card.full,
.field.full {
    grid-column: 1 / -1;
}
.design-card h3 {
    margin: 0 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    letter-spacing: -.04em;
}
.jn-missing-filterbar .button-row,
#backup .settings-grid {
    align-items: stretch;
}
.jn-article-profishop-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--jn-accent-soft);
    color: var(--jn-accent-dark);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}
.bc-duplicate-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(210,137,36,.13);
    color: #9a651e;
    font-size: 12px;
    font-weight: 800;
}
.jn-undo-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 9999;
    transform: translate(-50%, 20px);
    opacity: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px 0 18px;
    border-radius: 999px;
    background: rgba(32,25,20,.92);
    color: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    transition: opacity .18s ease, transform .18s ease;
}
.jn-undo-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.jn-undo-toast button {
    border: 0;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 850;
}
.support-attachment-list {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(15,39,71,.12);
    background: rgba(255,255,255,.54);
    display: grid;
    gap: 8px;
}
.support-attachment-list a {
    color: var(--jn-accent-dark);
    font-weight: 850;
    text-decoration: none;
}
@media (max-width: 760px) {
    body.jn-app-page::after,
    body.admin-page::after,
    body.auth-clean-page::after {
        background-attachment: scroll;
    }
    .settings-accent-options {
        grid-template-columns: 1fr 1fr;
    }
}

.support-history-list {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(15,39,71,.12);
    background: rgba(255,255,255,.46);
    display: grid;
    gap: 8px;
}
.support-history-list span {
    color: var(--jn-text-muted);
    font-size: 13px;
}

/* JN Accent Fix V35 1 */
.settings-accent-options label {
    position: relative !important;
    overflow: hidden !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.settings-accent-options label:hover {
    transform: translateY(-2px) !important;
    border-color: var(--jn-accent-dark) !important;
}
.settings-accent-options label.active,
.settings-accent-options label:has(input:checked) {
    border-color: var(--jn-accent-dark) !important;
    background: var(--jn-accent-soft) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
.settings-accent-options input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
.settings-accent-options label span {
    pointer-events: none !important;
}
.settings-accent-options label strong {
    pointer-events: none !important;
    color: var(--jn-text-main) !important;
}
.settings-accent-options label.active strong,
.settings-accent-options label:has(input:checked) strong {
    color: var(--jn-accent-dark) !important;
}
body.page-copy {
    --force-accent: var(--jn-accent) !important;
    --force-accent-dark: var(--jn-accent-dark) !important;
    --force-accent-soft: var(--jn-accent-soft) !important;
    --bc-accent: var(--jn-accent) !important;
    --bc-accent-dark: var(--jn-accent-dark) !important;
    --bc-accent-soft: var(--jn-accent-soft) !important;
    --kt-accent: var(--jn-accent) !important;
    --kt-accent-dark: var(--jn-accent-dark) !important;
    --kt-accent-soft: var(--jn-accent-soft) !important;
}
body.page-copy .solid-action,
body.page-copy .settings-primary-button,
body.page-copy .bc-new-group-button {
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
body.page-copy .line-button.primary-soft,
body.page-copy .bc-tag-chip.active,
body.page-copy .bc-meta-pill,
body.page-copy .bc-filter-btn.active,
body.page-copy .bc-icon-toggle.active {
    background: var(--jn-accent-soft) !important;
    color: var(--jn-accent-dark) !important;
    border-color: transparent !important;
}
body.page-copy .bc-copy-kicker,
body.page-copy .bc-copy-hero span,
body.page-copy .bc-group-card:hover .bc-title-input,
body.page-copy .bc-group-card:hover .bc-group-title-static,
body.page-copy #saveStatus,
body.page-copy .bc-search-box::before {
    color: var(--jn-accent-dark) !important;
}
body.page-copy .bc-title-input,
body.page-copy .bc-group-card,
body.page-copy .bc-new-group-button,
body.page-copy .bc-search-box:focus-within {
    border-color: var(--jn-accent-soft) !important;
}
body.page-copy .bc-group-card {
    border-left-color: var(--jn-accent) !important;
}
body.page-copy input:focus,
body.page-copy textarea:focus,
body.page-copy select:focus {
    border-color: var(--jn-accent-dark) !important;
    box-shadow: 0 0 0 4px var(--jn-accent-soft) !important;
}

/* JN Fix V36 Neue Gruppe Button
   Der Button hebt sich wieder sichtbar von Gruppe kopieren ab */
body.page-copy #addGroupHeroBtn.bc-new-group-button {
    min-height: 54px !important;
    padding: 0 26px !important;
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--jn-accent) 42%, rgba(255,255,255,.55)) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), var(--jn-accent-soft)) !important;
    color: var(--jn-accent-dark) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    box-shadow:
        0 20px 46px rgba(15, 39, 71, .16),
        0 0 0 5px color-mix(in srgb, var(--jn-accent) 9%, transparent),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    transform: translateY(-1px) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button::before {
    content: "+" !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(15, 39, 71, .18), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--jn-accent) 58%, rgba(255,255,255,.45)) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,1), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,1), color-mix(in srgb, var(--jn-accent-soft) 78%, white)) !important;
    box-shadow:
        0 26px 58px rgba(15, 39, 71, .20),
        0 0 0 6px color-mix(in srgb, var(--jn-accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button:active {
    transform: translateY(0) scale(.985) !important;
}

body[data-theme="night"].page-copy #addGroupHeroBtn.bc-new-group-button {
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.085), color-mix(in srgb, var(--jn-accent) 18%, transparent)) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--jn-accent) 44%, rgba(255,255,255,.12)) !important;
    box-shadow:
        0 22px 52px rgba(0,0,0,.26),
        0 0 0 5px color-mix(in srgb, var(--jn-accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width: 720px) {
    body.page-copy #addGroupHeroBtn.bc-new-group-button {
        min-height: 50px !important;
        padding: 0 22px !important;
    }
}

/* Persönliche Ansichtsgrösse: Die Sidebar bleibt immer unverändert */
@media (min-width: 761px) {
    body[data-display-size="compact"],
    body[data-display-size="extra_compact"] {
        overflow-x: hidden;
    }

    body[data-display-size="compact"] > .jn-app-layout > main {
        width: 111.111111%;
        min-height: 111.111111vh;
        zoom: .9;
    }

    body[data-display-size="extra_compact"] > .jn-app-layout > main {
        width: 121.95122%;
        min-height: 121.95122vh;
        zoom: .82;
    }
}

/* JN Startseite Abschluss 2026 06 16 */
body.jn-start-page {
    padding: clamp(16px, 2.5vw, 34px) !important;
}

body.jn-start-page .jn-start-shell {
    min-height: calc(100vh - clamp(32px, 5vw, 68px)) !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
}

body.jn-start-page .jn-start-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border-radius: 42px !important;
    border: 1px solid rgba(15, 39, 71, .11) !important;
    box-shadow:
        0 34px 82px rgba(15, 39, 71, .13),
        inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body[data-theme="night"].jn-start-page .jn-start-card {
    border-color: rgba(219, 229, 246, .11) !important;
    box-shadow:
        0 36px 86px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.jn-start-page .jn-start-card::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -100px;
    z-index: -1;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(23, 74, 126, .10), transparent 68%);
    pointer-events: none;
}

body.jn-start-page .jn-start-image-clean {
    box-shadow:
        0 22px 46px rgba(15, 39, 71, .12),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

body.jn-start-page .jn-start-photo {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease !important;
}

body.jn-start-page .jn-start-card:hover .jn-start-photo {
    transform: scale(1.018) !important;
    filter: saturate(1.03) contrast(1.015) !important;
}

body.jn-start-page .jn-start-content {
    position: relative !important;
    align-items: stretch !important;
    padding: 30px 26px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(23, 74, 126, .075), transparent 13rem),
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent) !important;
}

body[data-theme="night"].jn-start-page .jn-start-content {
    background:
        radial-gradient(circle at 88% 12%, rgba(47, 111, 168, .10), transparent 13rem),
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent) !important;
}

body.jn-start-page .jn-start-content > p {
    margin-bottom: 14px !important;
}

body.jn-start-page .jn-start-content h1 {
    text-wrap: balance;
}

body.jn-start-page .public-message {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: rgba(125, 147, 107, .10) !important;
    border-color: rgba(125, 147, 107, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

body.jn-start-page .jn-start-actions {
    width: 100% !important;
    margin-top: 38px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body.jn-start-page .jn-start-actions .solid-action {
    width: min(252px, 100%) !important;
    min-height: 62px !important;
    padding: 0 34px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
    box-shadow:
        0 16px 34px rgba(23, 74, 126, .24),
        inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}

body.jn-start-page .jn-start-actions .solid-action::after {
    content: "→";
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    transition: transform .18s ease;
}

body.jn-start-page .jn-start-actions .solid-action:hover::after,
body.jn-start-page .jn-start-actions .solid-action:focus-visible::after {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    body.jn-start-page .jn-start-card {
        border-radius: 32px !important;
        padding: 18px !important;
    }

    body.jn-start-page .jn-start-content {
        padding: 24px 10px 18px !important;
    }

    body.jn-start-page .jn-start-actions {
        margin-top: 28px !important;
    }
}

@media (max-width: 560px) {
    body.jn-start-page {
        padding: 12px !important;
    }

    body.jn-start-page .jn-start-card {
        border-radius: 26px !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    body.jn-start-page .jn-start-image-clean {
        border-radius: 22px !important;
    }

    body.jn-start-page .jn-start-content {
        padding: 22px 8px 14px !important;
    }

    body.jn-start-page .jn-start-content h1 {
        font-size: clamp(48px, 16vw, 68px) !important;
    }

    body.jn-start-page .jn-start-actions .solid-action {
        width: 100% !important;
    }
}