*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#ee7203;background:#fafafa;height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{padding:0 8px 24px}.app h1{text-align:center}textarea::placeholder,input::placeholder{opacity:.5}button{color:#fff;cursor:pointer;background-color:#ee7203;border:none;border-radius:8px;padding:8px 16px;font-weight:600;transition:background .2s}button:hover,button.selected{background:#8e4301}@media (width>=1050px){.app{padding:0 40px 24px}.main{width:80%;margin:0 auto}}.error{font-weight:700}.grid-container{border:4px solid #7ac897;border-radius:10px;margin:20px auto;padding:14px;font-size:12px}.grid-content{grid-template:repeat(5,1fr)/repeat(5,1fr);grid-auto-flow:column;display:grid}.grid-item{text-align:center;overflow-wrap:anywhere;background:#fff;border:1px solid #7ac897;border-radius:10px;height:126px;padding:5px}.grid-item.trash{z-index:-1;border:1px dashed #ee7203}.grid-item.trash .trash-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.grid-item.center{cursor:pointer;background-image:url(/Joker.png);background-position:50%;background-size:cover;height:100%}.grid-item.center:active{position:relative;top:2px;left:2px}.grid-item.center.active{border:5px solid #ee7203}.grid-header{justify-content:space-between;margin-bottom:24px;display:flex}.grid-header-item{text-align:center;color:#fff;background-color:#7ac897;border-radius:50px;width:144px;padding:3px;font-weight:700}.rand{grid-template-columns:repeat(5,1fr);display:grid}.rand .grid-item .add{color:#7ac897;cursor:pointer;background:0 0;border:0;width:100%;height:100%;font-size:48px;font-weight:700}@media (width>=1050px){.grid-container{width:894px;height:946px;font-size:unset;border-width:12px;padding:35px}.grid-content{gap:20px}.grid-item{border-width:5px;width:144px;height:144px;padding:10px}.grid-item.center{width:144px;height:144px}.grid-item.trash{border:5px dashed #ee7203;font-size:48px}.rand{flex-wrap:wrap;display:flex}.rand .grid-item{margin:10px}}.name-banner{text-align:center;color:#fff;background-color:#7ac897;border:0;border-radius:50px;width:300px;margin:8px auto;padding:5px;font-weight:700}.draggable-handle{cursor:grab;touch-action:none;position:relative;bottom:5px}.kommentar{margin:20px auto}.kommentar textarea{resize:none;box-sizing:border-box;border-color:#ee7203;border-radius:8px;width:100%;height:400px;margin-top:8px;padding:12px}@media (width>=1300px){.bingokarte{align-items:center;display:flex}.kommentar{width:100%;padding:0 35px 67px}.kommentar textarea{height:791px}}#spotifyIdInput{border:1px solid #ee7203;border-radius:8px;width:200px;margin:24px;padding:8px}.button-neuer-bingoschein{color:#fff;cursor:pointer;background-color:#ee7203;border:none;border-radius:6px;width:100px;padding:8px 14px;font-weight:600;transition:background .2s}.button-neuer-bingoschein:hover{background:#d56202}.button-mein-bingoschein{color:#fff;cursor:pointer;background:#7ac897;border:none;border-radius:6px;width:100px;padding:8px 14px;font-weight:600;transition:background .2s}.button-mein-bingoschein:hover{background:#5eac7b}@media (width>=1050px){.button-neuer-bingoschein,.button-mein-bingoschein{width:220px}}.sommersonntag-liste{width:100%;margin:24px 0;padding:0;list-style:none}.jahr-gruppe{align-items:flex-start;gap:20px;display:flex}.jahr-label{color:#ee7203;font-size:2rem;font-weight:700}.sommersonntag-item{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:16px;transition:transform .15s;display:flex;box-shadow:0 2px 6px #0000000d}.sommersonntag-item:hover{transform:scale(1.01)}.sommersonntag-item h2{margin:0;font-size:1rem}.sommersonntag-item small{color:#777;font-weight:400}.playlist{-o-transition:all .3s;background:#000;border-left:5px solid #ee7203;width:400px;font-size:12px;transition:all .3s;position:fixed;top:0;right:-405px}.playlist.expanded{right:0}.playlist.expanded .custom-menu{margin-left:-15px}.playlist .custom-menu{-o-transition:.3s;cursor:pointer;margin-left:-40px;transition:all .3s;display:inline-block;position:absolute;left:0}.songlist{min-height:144px;max-height:100vh;position:relative;bottom:0;overflow-y:scroll}.sidenav-toggle{float:left;cursor:pointer;z-index:1;background-color:#0000;background-image:none;border:0;border-radius:0;width:64px;height:64px;margin:0;padding:0;position:fixed;top:80px;right:10px}.sidenav-toggle:hover{background:0 0}.sidenav-toggle .icon-bar{-o-transition:all .15s;opacity:.7;background-color:#000;border-radius:1px;width:20px;height:2px;margin:0 auto;transition:all .15s;display:block}.sidenav-toggle .icon-bar+.icon-bar{margin-top:4px}.sidenav-toggle.expanded .icon-bar{background-color:#fff;width:25px}.sidenav-toggle.expanded .icon-bar:first-child{transform:rotate(45deg)}.sidenav-toggle.expanded .icon-bar:nth-child(2){opacity:0}.sidenav-toggle.expanded .icon-bar:nth-child(3){margin-top:-8px;transform:rotate(-45deg)}.bingokarte-name{color:#fff;cursor:pointer;background-color:#ee7203;border:0;min-width:100px;margin:8px;padding:10px}.bingokarte-name:hover{background-color:#d56202}.bingokarte-name.candidate{color:#000;background-color:#ff6}.confirm-rank{opacity:0;width:calc(100% - 18px);position:absolute;bottom:0}.grid-item:hover .confirm-rank{opacity:1}.confirm-rank button{color:#000;background-color:#0000}.select-rank{opacity:0;width:calc(100% - 10px);position:absolute;bottom:3px;right:5px}.grid-item{position:relative}.grid-item:hover .select-rank{opacity:1}.rankTop100{color:#000;font-size:28px;font-weight:700;position:absolute;bottom:0;right:5px}.grid-item:hover .rankTop100{display:none}.grid-item.correct{background-color:#9ff}.grid-item.correctColumn{background-color:#9f9}.grid-item.candidate{background-color:#ff6}.kommentar-text{white-space:pre}@media (width>=1050px){.bingokarte-name-row{justify-content:center;display:flex}.bingokarte-name{margin:16px 10px}}.field{resize:none;text-align:center;border:0;width:100%}.field.title{font-weight:700}.statistics .statistics-content{height:300px}.statistics .button-row{display:flex}.statistics .button-row button{align-items:center;gap:6px;margin:0 8px 8px 0;display:flex}.statistics .button-row button .icon{width:16px}@media (width>=1050px){.statistics{height:300px;display:flex}.statistics .statistics-content{width:100%;height:100%}.statistics .button-row{width:120px;padding-right:16px;display:block}.statistics .button-row button{width:100%;margin:8px 0}}.login input{border:1px solid #ee7203;width:100%;margin-top:4px;padding:8px}.login form{width:100%}.login .form-group{margin-top:16px}.login button{color:#fff;cursor:pointer;background-color:#ee7203;border:0;width:100%;margin-top:16px;margin-bottom:16px;padding:8px 16px}@media (width>=1050px){.login{width:400px;margin:0 auto}}.header{color:#fff;background:#ee7203;border-radius:0 0 12px 12px;justify-content:space-between;align-items:center;padding:12px 24px;display:flex;box-shadow:0 2px 8px #0000001a}.header .home-button{cursor:pointer;width:48px}.header .home-button img{width:100%}.header .header-center{position:absolute;left:50%;transform:translate(-50%)}.header .header-user-info{justify-content:space-between;align-items:center;gap:16px;display:flex}.header .user-info{justify-content:space-between;align-items:center;gap:6px;font-weight:500;display:flex}.header .user-icon{width:24px;height:24px}.header .logout-button{color:#ee7203;cursor:pointer;background:#fff;border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-weight:600;transition:all .2s;display:flex}.header .logout-button:hover{background:#ffe0c2}.header .logout-icon{width:20px;height:20px}.home-button{outline:none;width:48px;height:48px;text-decoration:none;display:inline-block}.home-button svg{will-change:transform, filter;width:100%;height:100%;transition:transform .18s,filter .18s,box-shadow .18s;display:block}.home-button:hover svg,.home-button:focus svg{filter:drop-shadow(0 8px 18px #00000024);transform:translateY(-3px)scale(1.06)}.home-button:focus{border-radius:999px;box-shadow:0 0 0 4px #ee720324}@media (width<=960px){.home-button{width:40px;height:40px}.header{padding:12px}.header h1{font-size:24px}.header .logout-text,.header .user-info{display:none}.header .header-user-info{display:block}}@media (width>=1050px){.header{width:100%}}