/* Musikstunde · Neonwirbel. Produktdesign, keine Änderungen am gemeinsamen Kern. */
:root{--music-navy:#111;--music-cyan:#16c8ef;--music-pink:#ff0095;--music-yellow:#ffe600;--music-violet:#793cff;--music-orange:#ff8900;--music-coral:#ff5364;--music-lime:#a5ed00;--music-mint:#13d6a3;--petrol:#111;--dark:#111;--lime:#ffe600;--coral:#ae0066;--cream:#fff;--muted:#626262;--line:#e2e2e2;--shadow:0 10px 28px #0000000c}
body{background:#fff;color:#111}
.music-header,.site-header{background:#fff;border-bottom:1px solid #e9e9e9;box-shadow:none;backdrop-filter:none}
.music-brand{gap:9px;color:#111;font-weight:950;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.065em;white-space:nowrap}
.music-brand:after{content:'Musikstunde.eu'}
.music-brand img{width:64px;height:64px;flex-shrink:0}
.brand img{background:#fff;border-radius:50%}
.music-actions{flex-wrap:wrap}
.music-main{padding-top:clamp(42px,7vw,100px)}
.music-hero:has(.music-hero-logo){max-width:none;position:relative;isolation:isolate;min-height:440px;padding:32px 48% 50px 0}
.music-hero h1{font-size:clamp(48px,7.6vw,112px);letter-spacing:-.065em;line-height:.98;overflow-wrap:anywhere}
.music-hero-logo{position:absolute;z-index:-1;width:47%;height:auto;right:0;top:0;object-fit:contain}
.music-custom-logo{display:block;max-width:100%;max-height:160px;object-fit:contain}
.music-hero>p:not(.eyebrow){font-size:clamp(19px,2vw,27px);color:#626262}
.eyebrow{color:#ae0066}
.menu-toggle,.logout-button,.hero-links a{border:1px solid #d9d9d9;border-radius:28px;box-shadow:none;background:#fff;color:#111}
.login-button,.secondary-menu-button,.primary,.download,.ag-submit{border-radius:28px;background:#111;color:#fff;box-shadow:none}
.login-button:hover,.secondary-menu-button:hover,.primary:hover,.download:hover{background:#541cc1;color:#fff}
.hero-links a:hover,.menu-toggle:hover,.logout-button:hover{background:#f2efff;color:#111;transform:none}
.public-menu,.music-footer,footer{background:#111;color:#fff}
/* Keep every menu group reachable, including when opened far down a page. */
#publicMenu.public-menu{position:fixed;left:0;right:0;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.public-menu-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.menu-heading{font-size:16px;overflow-wrap:anywhere;border-color:var(--music-pink)}
.menu-group:nth-child(2) .menu-heading{border-color:var(--music-cyan)}
.menu-group:nth-child(3) .menu-heading{border-color:var(--music-yellow)}
.menu-group:nth-child(4) .menu-heading{border-color:var(--music-violet)}
.menu-group:nth-child(5) .menu-heading{border-color:var(--music-mint)}
.menu-group:nth-child(6) .menu-heading{border-color:var(--music-orange)}
.music-footer,footer{border-top:5px solid transparent;border-image:linear-gradient(90deg,#ff0095,#ff5364,#ff8900,#ffe600,#a5ed00,#13d6a3,#16c8ef,#793cff) 1}
.music-footer a,footer a,footer span:last-child{color:#fff}
.hero{background:#fff;border-bottom:5px solid transparent;border-image:linear-gradient(90deg,#ff0095,#ff8900,#ffe600,#13d6a3,#16c8ef,#793cff) 1}
.hero h1{color:#111}
.music-feature-grid article,.music-poster a,.legal-card,.music-gallery,.panel,.document-card,.media-library-card,.music-quiz-card{box-shadow:0 8px 30px #00000008;border-radius:18px}
.music-feature-grid article{border:1px solid #e5e5e5;border-top:5px solid var(--music-pink)}
.music-feature-grid article:nth-child(2){box-shadow:none;border-top-color:var(--music-cyan)}
.music-feature-grid article:nth-child(3){box-shadow:none;border-top-color:var(--music-lime)}
.music-gallery{background:#111}
.music-gallery-controls{background:#111d;border-radius:30px}
.music-gallery-controls>button{border-radius:50%}
.topic-nav a.active,.topic-nav a:hover{background:#111;border-color:#111;color:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid #793cff55;border-color:#793cff}
a:focus-visible,button:focus-visible{outline:3px solid #793cff;outline-offset:4px}
.legal-card a{color:#8c0055}
@media(max-width:900px){.music-hero:has(.music-hero-logo){min-height:340px}.music-actions{gap:8px}.music-brand{font-size:24px}}
@media(max-width:650px){.music-header{flex-wrap:wrap}.music-brand{font-size:25px}.music-brand img{width:52px;height:52px}.music-actions{width:100%;justify-content:flex-end}.public-menu{position:relative;top:auto;max-height:70vh}.music-hero:has(.music-hero-logo){padding:0;min-height:0;display:flex;flex-direction:column}.music-hero-logo{position:relative;order:5;width:min(85%,360px);align-self:center;margin-top:28px}.music-hero h1{font-size:clamp(54px,14vw,84px)}.music-main{padding-top:38px}.music-poster,.music-feature-grid,.music-gallery-section{margin-top:58px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* 1.17.1: ruhige Arbeitsflächen im Materialpool. Die Identitätsfarben
   übersteuern bewusst die Inline-Vorgaben des unveränderten Portalkerns. */
.site-header .session-identity{background:#e4e4e4!important;border:1px solid #d9d9d9!important;color:#626262!important;border-radius:22px}
.site-header .session-identity-label{color:#626262!important}
.tip{background:#e4e4e4;color:#626262;border:1px solid #d5d5d5;border-top:4px solid var(--music-mint);border-radius:14px}
.tip b{color:#4f4f4f}
.admin-category-divider{background:#e4e4e4;color:#4f4f4f;border-left:5px solid var(--music-cyan);border-radius:10px}
.admin-category-divider span{color:#626262}
.admin-category-divider h2{color:#4f4f4f}
#pool-category-musiktheorie{border-left-color:var(--music-violet)}
#pool-category-instrumente{border-left-color:var(--music-orange)}
#pool-category-musikgeschichte{border-left-color:var(--music-pink)}
#pool-category-produktion{border-left-color:var(--music-mint)}
