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