body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2rem;line-height:.3}html,body{overflow:hidden}.stadt-button{--glow-color: rgb(217, 176, 255);--glow-spread-color: rgba(191, 123, 255, .78);--btn-color: rgb(100, 61, 136);border:.2em solid var(--glow-color);padding:.5em 1.2em;color:var(--glow-color);font-size:14px;font-weight:700;background-color:var(--btn-color);border-radius:.8em;outline:none;box-shadow:0 0 .7em .2em var(--glow-color),0 0 2em .8em var(--glow-spread-color),inset 0 0 .5em .2em var(--glow-color);text-shadow:0 0 .4em var(--glow-color);position:relative;transition:all .3s ease;cursor:grab;text-align:center}.stadt-button:after{pointer-events:none;content:"";position:absolute;top:120%;left:0;height:100%;width:100%;background-color:var(--glow-spread-color);filter:blur(1.5em);opacity:.6;transform:perspective(1.2em) rotateX(35deg) scaleY(.6)}.stadt-button:hover{color:var(--btn-color);background-color:var(--glow-color);box-shadow:0 0 .8em .2em var(--glow-color),0 0 3em 1.5em var(--glow-spread-color),inset 0 0 .6em .2em var(--glow-color)}.stadt-button:active{transform:scale(.96);box-shadow:0 0 .4em .2em var(--glow-color),0 0 2em 1.5em var(--glow-spread-color),inset 0 0 .4em .2em var(--glow-color)}.bundesland-button,.download-button{--white: #ffe7ff;--bg: #080808;--radius: 100px;outline:none;cursor:pointer;border:0;position:relative;border-radius:var(--radius);background-color:var(--bg);transition:all .2s ease;box-shadow:inset 0 .3rem .9rem #ffffff4d,inset 0 -.1rem .3rem #000000b3,inset 0 -.4rem .9rem #ffffff80,0 3rem 3rem #0000004d,0 1rem 1rem -.6rem #000c;padding:14px 22px;color:#fffc;font-size:18px;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word}.bundeslaender-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));grid-template-rows:repeat(4,auto);gap:12px;width:100%;grid-template-areas:"bw b ber mv" "bremen hh hessen bran" "nds nrw rp saar" "sachsen sa sh thu"}.user-input{width:25%;padding:8px 12px;font-size:16px;color:#000;border-radius:8px;border:2px solid #a855f7;box-shadow:0 2px 4px #0003;outline:none;transition:all .2s ease}.user-input:focus{border-color:#fbbf24;box-shadow:0 2px 8px #bf7bff80}.userInput{--glow-color: rgb(217, 176, 255);--glow-spread-color: rgba(191, 123, 255, .78);--btn-color: rgb(100, 61, 136);width:16%;padding:12px 20px 8px;font-size:16px;font-style:italic;font-family:Arial,Helvetica,sans-serif;color:#ebe5e5;background-color:#050008;border-radius:.8em;text-align:center;box-shadow:0 0 .2em .2em var(--glow-color),0 0 2em .2em var(--glow-spread-color),inset 0 0 .2em .2em var(--glow-color);outline:none;transition:all .2s ease;border:4px solid rgb(60,53,59)}.userInput:focus{outline:none;border-color:#5a055f;box-shadow:0 2px 8px #bf7bff80}.userInput:hover{border-color:#888}.userInput:focus::placeholder{color:transparent}