/* ===== Anmelden oben rechts (account.js, v4 14.10.2026) ===== */
.csl-btn {
    --csl-line: rgba(255, 255, 255, .12);
    position: relative; overflow: hidden; flex: none;
    display: inline-flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 .85rem 0 .3rem;
    border-radius: 999px; border: 1px solid var(--csl-line);
    background: rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--white); font: 500 .8rem/1 var(--font); letter-spacing: .01em;
    cursor: pointer;
    transition: border-color .3s, background .3s, box-shadow .3s, transform .2s;
}
.csl-btn::after {                               /* Lichtstreifen beim Hover */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 140, 51, .28) 50%, transparent 70%);
    transform: translateX(-120%);
}
.csl-btn:hover, .csl-btn[aria-expanded="true"] {
    border-color: rgba(255, 106, 0, .55);
    background: rgba(255, 106, 0, .07);
    box-shadow: 0 0 0 4px rgba(255, 106, 0, .08), 0 8px 24px rgba(255, 106, 0, .15);
}
.csl-btn:hover::after { transform: translateX(120%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.csl-btn:active { transform: scale(.97); }
.csl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.csl-ico {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #ff8c33, #ff6a00 55%, #c2410c);
    color: #fff; box-shadow: 0 0 14px rgba(255, 106, 0, .45);
    transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.csl-ico svg { width: 16px; height: 16px; }
.csl-btn:hover .csl-ico, .csl-btn[aria-expanded="true"] .csl-ico { transform: rotate(-8deg) scale(1.08); }
.csl-chev { width: 14px; height: 14px; color: var(--gray); transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .3s; margin-left: -.1rem; }
.csl-btn[aria-expanded="true"] .csl-chev { transform: rotate(180deg); color: var(--accent); }

/* Ecke: in der festen Navigation, ganz rechts am Rand */
.csl-corner {
    position: absolute; top: 50%; right: clamp(1rem, 2vw, 1.75rem);
    transform: translateY(-50%);
    animation: cslIn .7s cubic-bezier(.2, .8, .2, 1) .5s both;
}
.csl-corner:active { transform: translateY(-50%) scale(.97); }
@keyframes cslIn { from { opacity: 0; transform: translate(14px, -50%); filter: blur(4px); } to { opacity: 1; transform: translate(0, -50%); filter: none; } }
/* Platz schaffen, damit die Navigation nicht unter den Knopf laeuft */
@media (min-width: 1181px) {
    html.has-csl .nav-container { padding-right: max(2rem, calc(205px - max(0px, (100vw - 1200px) / 2))); }
}
/* Bis 1180 px: kein Platz fuer die Ecke, dann laeuft ein kleines Symbol in der Leiste mit */
@media (min-width: 769px) and (max-width: 1180px) {
    .csl-corner { display: none; }
    .csl-mobile { display: inline-flex !important; width: 38px; padding: 0; justify-content: center; margin-left: .5rem; }
}
/* Sehr schmale Laptops/Tablets quer: Menuepunkte etwas enger, damit das Symbol reinpasst */
@media (min-width: 769px) and (max-width: 940px) {
    html.has-csl .nav-links { gap: 1.4rem; }
}
.csl-mobile { display: none; }

/* Auswahlfeld */
.csl-panel {
    position: fixed; z-index: 1002; width: 300px; max-width: calc(100vw - 24px);
    padding: .55rem; border-radius: 18px;
    background: rgba(17, 17, 17, .82);
    -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 106, 0, .04);
    transform-origin: top right;
    visibility: hidden; opacity: 0;
    clip-path: inset(0 0 100% 30% round 18px);
    transform: translateY(-6px) scale(.97);
    transition: clip-path .28s ease, opacity .2s ease, transform .28s ease, visibility 0s .28s;
}
.csl-panel.open {
    visibility: visible; opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: none;
    transition: clip-path .5s cubic-bezier(.2, .9, .2, 1), opacity .25s ease, transform .5s cubic-bezier(.2, .9, .2, 1), visibility 0s;
}
.csl-head { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem .65rem; }
.csl-head span { font: 600 .62rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.csl-head i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 106, 0, .5), transparent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1) .15s; }
.csl-panel.open .csl-head i { transform: scaleX(1); }
.csl-item {
    position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .75rem .7rem; border-radius: 12px; text-decoration: none; color: var(--white);
    opacity: 0; transform: translateY(8px);
    transition: background .25s, opacity .3s, transform .3s;
}
.csl-panel.open .csl-item { opacity: 1; transform: none; transition: background .25s, opacity .45s ease, transform .55s cubic-bezier(.2, .9, .2, 1); }
.csl-panel.open .csl-item:nth-of-type(1) { transition-delay: 0s, .1s, .1s; }
.csl-panel.open .csl-item:nth-of-type(2) { transition-delay: 0s, .18s, .18s; }
.csl-item::before {                             /* orange Kante links beim Hover */
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
    background: var(--accent); transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.csl-item:hover, .csl-item:focus-visible { background: rgba(255, 255, 255, .045); outline: none; }
.csl-item:hover::before, .csl-item:focus-visible::before { transform: scaleY(1); }
.csl-item-ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: rgba(255, 106, 0, .1); border: 1px solid rgba(255, 106, 0, .22); color: var(--accent);
    transition: background .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.csl-item-ico svg { width: 19px; height: 19px; }
.csl-item:hover .csl-item-ico { background: rgba(255, 106, 0, .18); transform: scale(1.06); }
.csl-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.csl-item-txt strong { font-size: .88rem; font-weight: 600; }
.csl-item-txt small { font-size: .74rem; color: var(--gray); }
.csl-arrow { width: 16px; height: 16px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.csl-item:hover .csl-arrow, .csl-item:focus-visible .csl-arrow { opacity: 1; transform: none; }

/* Hell-Modus */
body.light .csl-btn { --csl-line: rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .6); color: #111; }
body.light .csl-panel { background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .08); box-shadow: 0 24px 60px rgba(0, 0, 0, .14); }
body.light .csl-item { color: #111; }
body.light .csl-item:hover { background: rgba(0, 0, 0, .04); }

@media (max-width: 768px) {
    .csl-corner { display: none; }
    .csl-mobile { display: inline-flex; margin-left: auto; margin-right: .75rem; padding: 0; width: 38px; justify-content: center; z-index: 1001; }
    .csl-mobile .csl-ico { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .csl-btn, .csl-btn::after, .csl-ico, .csl-chev, .csl-panel, .csl-panel.open, .csl-item, .csl-head i, .csl-arrow { transition: none !important; animation: none !important; }
}