/* MyTrainer Lernproben – scoped visual system; existing site styles preserved */
body:has(.demo-shell),body:has(.demo-index){background:radial-gradient(ellipse 68% 380px at 83% 0%,rgba(48,132,174,.19),transparent),linear-gradient(180deg,#f4f8fc,#fff 660px);color:#143249;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.58}
body:has(.demo-shell) .topbar,body:has(.demo-index) .topbar{background:#092e45;color:#f5faff;border-bottom:1px solid #34627d;box-shadow:0 4px 22px #0d365222}
body:has(.demo-shell) .topbar a,body:has(.demo-index) .topbar a{color:#f5faff;text-decoration:none}
body:has(.demo-shell) .topbar .brand,body:has(.demo-index) .topbar .brand{font-weight:800;letter-spacing:.02em}
body:has(.demo-shell) .nav,body:has(.demo-index) .nav{max-width:1200px;margin:auto;display:flex;gap:2rem;align-items:center;justify-content:space-between;min-height:72px;padding:12px 24px;flex-wrap:wrap}
body:has(.demo-shell) .nav .links,body:has(.demo-index) .nav .links{display:flex;flex-wrap:wrap;gap:1.5rem}
.demo-shell{max-width:1030px!important;padding:3.2rem 1.5rem 5rem!important}
.demo-shell h1{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.13;letter-spacing:-.035em;margin:.5rem 0 1rem;color:#0b2f46}
.demo-shell .eyebrow{display:inline-block;background:#e4f2f8;color:#075779;padding:.35rem .8rem;border-radius:30px;font-size:.83rem;font-weight:750;letter-spacing:.04em}
.demo-shell>p{font-size:1.12rem;max-width:75ch;color:#49677b}
.demo-steps{gap:.65rem!important;margin:1.8rem 0!important}
.demo-steps span{border:1px solid #bdd3df!important;background:white;border-radius:999px!important;padding:.65rem 1.1rem!important;font-size:.94rem;font-weight:650}
.demo-steps span.active{background:#095b83!important;color:white!important;border-color:#095b83!important;box-shadow:0 3px 13px #0a658b33}
.demo-box{background:white!important;border:1px solid #d1e0e9!important;border-radius:22px!important;padding:clamp(1.3rem,3vw,2.6rem)!important;box-shadow:0 16px 42px #143b5214!important;color:#183d52!important;position:relative}
.demo-box h2{font-size:clamp(1.35rem,2.4vw,1.8rem);color:#0b3d59;margin-top:0}
.demo-box p{line-height:1.7}
.demo-btn{background:#07618b!important;color:white!important;border-radius:11px!important;font-weight:650!important;transition:transform .15s,box-shadow .15s}
.demo-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px #095c8333}
.demo-btn.alt{background:#e5f0f6!important;color:#17445f!important}
.demo-input{border:2px solid #a5bdcb!important;border-radius:10px!important;min-height:46px}
.demo-feedback{border-radius:0 10px 10px 0}
.demo-shell a:not(.brand):not(.demo-btn){color:#09658e}
.demo-shell .demo-box:before{content:"MYTRAINER · LERNSTUDIO";display:block;font-size:.72rem;letter-spacing:.13em;color:#5e8194;font-weight:750;margin-bottom:1.3rem}
.demo-index{max-width:1160px;margin:auto;padding:3rem 1.4rem 5rem}
.demo-index h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;color:#0c3550}
.demo-index a{color:#08638a}
@media(max-width:680px){body:has(.demo-shell) .nav,body:has(.demo-index) .nav{gap:.7rem;padding:1rem}.demo-shell{padding:2rem 1rem!important}.demo-steps span{font-size:.8rem!important;padding:.5rem .65rem!important}.demo-box{padding:1.3rem!important}}
@media(prefers-color-scheme:dark){body:has(.demo-shell),body:has(.demo-index){background:linear-gradient(180deg,#102e40,#071b29);color:#e6f2f8}.demo-shell h1,.demo-index h1{color:#f1faff}.demo-shell>p{color:#bed1df}.demo-box{background:#15384c!important;border-color:#386076!important;color:#eff9ff!important}.demo-box h2{color:#f3fbff}.demo-steps span{background:#1d4357;color:#f0f8fc;border-color:#42687a!important}.demo-shell .eyebrow{background:#204e65;color:#d9f4ff}}