:root{
    --brand:#f39c12;
    --bg:#0f1115;
    --card:#171c24;
    --btn:#273041;
    --text:#eef2f7;
    --muted:#9ca9be;
    --line:rgba(255,255,255,.14);
}

:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"]{
    --bg:#f3f5f8;
    --card:#ffffff;
    --btn:#e8edf5;
    --text:#1f2a37;
    --muted:#4b5d75;
    --line:rgba(16,24,40,.14);
}

body{
    color:var(--text);
}

/* Nur per Tastatur sichtbar — ohne clip-path (weniger Rendering-Nebenwirkungen) */
.skip-to-main{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    white-space:nowrap;
    border:0;
}
.skip-to-main:focus,
.skip-to-main:focus-visible{
    position:fixed;
    left:12px;
    top:12px;
    width:auto;
    height:auto;
    margin:0;
    padding:12px 16px;
    overflow:visible;
    white-space:normal;
    z-index:10000;
    background:var(--brand);
    color:#0f1115;
    font-weight:700;
    border-radius:8px;
    text-decoration:none;
    outline:2px solid #fff;
    outline-offset:2px;
}

#main-content{
    display:block;
    margin:0;
    padding:0;
    min-height:0;
}

.site-shell{
    width:min(1240px,96%);
    margin:0 auto;
}

.app-header{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    z-index:1100;
    margin:0 auto 22px;
    width:min(1240px,96%);
}

.app-header-spacer{
    display:none;
    height:0;
}

.app-header-card{
    background:transparent;
    border:0;
    padding:0;
    backdrop-filter:none;
    box-shadow:none;
}

.app-header-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:10px;
}

.site-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-size:1.02rem;
    font-weight:800;
    text-decoration:none;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--brand) 42%, var(--line) 58%);
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 90%, transparent));
    box-shadow:0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.site-brand i{
    color:var(--brand);
}

.site-brand:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.09);
    border-color:color-mix(in srgb, var(--brand) 68%, var(--line) 32%);
}

.site-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.site-nav-desktop{
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 95%, transparent), color-mix(in srgb, var(--card) 90%, transparent));
    border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
    border-radius:999px;
    padding:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

.site-nav a,.site-ui-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius:999px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--btn) 94%, transparent), color-mix(in srgb, var(--btn) 84%, transparent));
    color:var(--text);
    text-decoration:none;
    cursor:pointer;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.01em;
    transition:transform .16s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.site-nav a{
    color:#ffffff !important;
}

.site-lang-select-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    min-height:40px;
    box-sizing:border-box;
    border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius:10px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 86%, transparent));
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.site-lang-select-wrap:hover{
    border-color:color-mix(in srgb, var(--brand) 64%, var(--line) 36%);
    box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
}

.site-lang-select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    border:0;
    background:transparent;
    color:#ffffff !important;
    font-size:.84rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    min-width:72px;
    padding-right:18px;
    outline:none;
    cursor:pointer;
}

.site-lang-select option{
    color:#ffffff;
    background-color:#1a1f28;
}

.site-lang-select-wrap i{
    width:16px;
    height:16px;
    color:#ffffff;
    opacity:.92;
}

.site-lang-select-wrap::after{
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid color-mix(in srgb, var(--text) 85%, transparent);
    border-bottom:2px solid color-mix(in srgb, var(--text) 85%, transparent);
    transform:rotate(45deg) translateY(-2px);
    pointer-events:none;
    margin-left:-10px;
}

[data-theme="light"] .site-lang-select-wrap{
    box-shadow:0 2px 8px rgba(20,33,51,.08), inset 0 1px 0 rgba(255,255,255,.88);
}

[data-theme="light"] .site-lang-select-wrap:hover{
    box-shadow:0 4px 10px rgba(20,33,51,.1), inset 0 1px 0 rgba(255,255,255,.94);
    border-color:rgba(20,33,51,.22);
}

[data-theme="light"] .site-lang-select{
    color:#1f2a37 !important;
}

[data-theme="light"] .site-lang-select option{
    color:#1f2a37;
    background-color:#eef3f9;
}

[data-theme="light"] .site-nav a:hover,
[data-theme="light"] .site-ui-btn:hover{
    box-shadow:0 2px 8px rgba(20,33,51,.1);
}

.site-ui-btn--ghost{
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 86%, transparent));
}

[data-toggle-theme].site-ui-btn{
    border-radius:10px;
    padding:8px 12px;
    min-height:40px;
    box-sizing:border-box;
}

.site-nav a:hover,.site-ui-btn:hover{
    transform:translateY(-1px);
    background:color-mix(in srgb, var(--brand) 20%, var(--btn) 80%);
    border-color:color-mix(in srgb, var(--brand) 66%, var(--line) 34%);
    box-shadow:0 8px 18px rgba(0,0,0,.2);
}

.site-nav a:hover{
    color:#ffffff !important;
}

.site-nav a.is-active{
    border-color:color-mix(in srgb, var(--brand) 82%, var(--line) 18%);
    background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 38%, var(--btn) 62%), color-mix(in srgb, var(--brand) 28%, var(--btn) 72%));
    color:#ffffff;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent), 0 8px 18px rgba(0,0,0,.2);
}

.site-nav a.is-copied{
    background:linear-gradient(180deg, #22c55e, #16a34a) !important;
    border-color:#15803d !important;
    color:#ffffff !important;
    box-shadow:0 8px 18px rgba(21,128,61,.32) !important;
}

.site-controls{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.site-controls-desktop{
    display:flex;
    gap:8px;
    align-items:center;
}

@media (min-width:901px){
    .app-header{
        position:static !important;
        top:auto;
        width:min(1240px,96%);
        left:auto;
        transform:none;
        margin:12px auto 26px;
        z-index:1100;
    }

    .app-header-spacer{
        display:none;
        height:0;
    }

    .app-header-top{
        margin-bottom:0;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:10px;
    }

    .site-brand{
        justify-self:start;
        width:auto;
        max-width:100%;
    }

    .site-controls{
        justify-content:flex-end;
        flex-wrap:nowrap;
    }

    .site-controls-desktop{
        display:none;
    }

    .site-nav-toggle{
        display:inline-flex !important;
        border-radius:10px;
    }

    .site-nav-desktop{
        display:none;
    }

    .site-drawer-backdrop{
        display:block !important;
        position:fixed;
        inset:0;
        background:rgba(5,8,14,.52);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease;
        z-index:1198;
    }

    .site-drawer{
        display:block !important;
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:min(420px,36vw);
        min-width:320px;
        transform:translateX(104%);
        transition:transform .25s ease;
        z-index:1199;
        padding:12px;
        box-sizing:border-box;
    }

    .site-drawer-inner{
        height:100%;
        border-radius:20px;
        background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 90%, transparent));
        border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
        box-shadow:0 18px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
        padding:14px;
        overflow:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .site-drawer-head{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .site-drawer-head .site-ui-btn{
        margin-left:auto;
        padding:7px 9px;
        border-radius:10px;
    }

    .site-drawer-head .site-ui-btn[data-close-nav]:hover{
        color:#fff;
        background:linear-gradient(180deg, #ef4444, #dc2626);
        border-color:#b91c1c;
        box-shadow:0 8px 18px rgba(185,28,28,.35);
    }

    .site-controls-mobile{
        display:flex !important;
        gap:8px;
        margin-top:6px;
        margin-bottom:12px;
    }

    .site-controls-mobile .site-ui-btn{
        flex:1 1 auto;
        justify-content:center;
        min-height:44px;
    }

    .site-nav-mobile{
        display:flex;
        flex-direction:column;
        gap:8px;
        overflow:hidden;
    }

    .site-nav-mobile a{
        width:100%;
        justify-content:flex-start;
        min-height:44px;
        padding:9px 8px;
        box-sizing:border-box;
        border:0;
        background:transparent;
        box-shadow:none;
        border-radius:8px;
        font-weight:700;
    }

    .site-nav-mobile a:hover{
        background:color-mix(in srgb, var(--brand) 12%, transparent);
        border:0;
        box-shadow:none;
        transform:none;
    }

    .app-header.is-open .site-drawer-backdrop{
        opacity:1;
        pointer-events:auto;
    }

    .app-header.is-open .site-drawer{
        transform:translateX(0);
    }

    html.has-mobile-nav-open,
    body.has-mobile-nav-open{
        overflow:hidden;
    }
}

.site-footer{
    margin-top:24px;
    text-align:center;
    padding-top:14px;
    border-top:1px solid var(--line);
    color:var(--muted);
}

.site-footer a{
    color:var(--brand);
    text-decoration:none;
    margin:0 8px;
}

.site-nav-toggle{
    display:none;
}

.site-nav-toggle,
.site-home-btn{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    justify-content:center;
}

.site-drawer-backdrop,
.site-drawer{
    display:none;
}

.site-controls-mobile{
    display:none;
}

/* Light Feinschliff fuer Kapsel-Look */
[data-theme="light"] .site-brand{
    background:linear-gradient(180deg, #ffffff, #f3f7fc);
    border-color:rgba(20,33,51,.18);
    color:#1f2a37;
    box-shadow:0 8px 18px rgba(20,33,51,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
[data-theme="light"] .site-nav-desktop{
    background:linear-gradient(180deg, #f8fbff, #edf3fa);
    border-color:rgba(20,33,51,.14);
    box-shadow:0 10px 20px rgba(20,33,51,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="light"] .site-nav a{
    color:#1f2a37 !important;
    background:linear-gradient(180deg, #f6f9fd, #eaf1f9);
    border-color:rgba(20,33,51,.15);
}
[data-theme="light"] .site-nav a:hover{
    color:#1f2a37 !important;
    background:#e7eff8;
    border-color:rgba(20,33,51,.24);
}
[data-theme="light"] .site-nav a.is-active{
    color:#1f2a37;  
    background:linear-gradient(180deg, #ffdca8, #f6c981);
    border-color:rgba(154,95,0,.35);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent), 0 2px 8px rgba(20,33,51,.1);
}
[data-theme="light"] .site-ui-btn{
    color:#1f2a37;
    background:linear-gradient(180deg, #f6f9fd, #eaf1f9);
    border-color:rgba(20,33,51,.15);
}
[data-theme="light"] .site-nav-toggle{
    color:#1f2a37;
    border-color:rgba(20,33,51,.22);
}
[data-theme="light"] .site-drawer-inner{
    background:linear-gradient(180deg, #ffffff, #f2f7fd);
    border-color:rgba(20,33,51,.14);
    box-shadow:0 16px 32px rgba(20,33,51,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

@media (max-width:900px){
    .app-header{
        position:static !important;
        top:auto;
        left:auto;
        transform:none;
        margin-bottom:16px;
    }
    .app-header-top{
        margin-bottom:0;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:10px;
    }
    .site-brand{
        justify-self:start;
        width:auto;
        max-width:100%;
    }

    .app-header-spacer{
        display:none;
        height:0;
    }
    .site-controls{
        justify-content:flex-end;
        flex-wrap:nowrap;
    }
    .site-controls-desktop{
        display:none;
    }
    .site-nav-toggle{
        display:inline-flex;
        border-radius:10px;
    }
    .site-nav-desktop{
        display:none;
    }

    .site-drawer-backdrop{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(5,8,14,.52);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease;
        z-index:1198;
    }

    .site-drawer{
        display:block;
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:min(86vw,360px);
        transform:translateX(104%);
        transition:transform .25s ease;
        z-index:1199;
        padding:12px;
        box-sizing:border-box;
    }

    .site-drawer-inner{
        height:100%;
        border-radius:20px;
        background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 90%, transparent));
        border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
        box-shadow:0 18px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
        padding:14px;
        padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px) + 120px);
        overflow:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .site-drawer-head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        margin-bottom:10px;
    }

    .site-drawer-title{
        color:var(--muted);
        font-size:.82rem;
        font-weight:700;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .site-controls-mobile{
        display:flex;
        gap:8px;
        margin-bottom:10px;
    }

    .site-controls-mobile .site-ui-btn{
        flex:1 1 auto;
        justify-content:center;
        min-height:44px;
    }

    .site-nav-mobile{
        display:flex;
        flex-direction:column;
        gap:8px;
        overflow:hidden;
    }

    .site-nav-mobile a{
        width:100%;
        justify-content:flex-start;
        min-height:44px;
        box-sizing:border-box;
        border:0;
        background:transparent;
        box-shadow:none;
        border-radius:8px;
        padding:9px 8px;
        font-weight:700;
    }

    .site-nav-mobile a:hover{
        background:color-mix(in srgb, var(--brand) 12%, transparent);
        border:0;
        box-shadow:none;
        transform:none;
    }

    .app-header.is-open .site-drawer-backdrop{
        opacity:1;
        pointer-events:auto;
    }

    .app-header.is-open .site-drawer{
        transform:translateX(0);
    }

    html.has-mobile-nav-open,
    body.has-mobile-nav-open{
        overflow:hidden;
    }
}

/* Globale Wartungszeile (alle Seiten mit ui.php, außer status) */
.ui-global-maintenance{
    background:color-mix(in srgb, #facc15 18%, transparent);
    border-bottom:1px solid color-mix(in srgb, #facc15 45%, transparent);
    color:var(--text);
    text-align:center;
    padding:10px 16px;
    margin-bottom:16px;
    font-size:0.9rem;
    font-weight:600;
    line-height:1.45;
}
.ui-global-maintenance__link{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
}
.ui-global-maintenance__link:hover{
    color:var(--brand);
}