*,: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{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-toggle{z-index:110;align-items:center;gap:8px;transition:right .25s;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 12px #0003}.playlist-toggle.expanded{right:324px}.playlist-backdrop{z-index:90;background:#00000059;position:fixed;inset:0}.playlist{z-index:100;visibility:hidden;background:#fafafa;border-left:4px solid #ee7203;width:300px;transition:right .25s;position:fixed;top:0;bottom:0;right:-320px;box-shadow:-4px 0 16px #00000026}.playlist.expanded{visibility:visible;right:0}.playlist-inner{flex-direction:column;width:300px;height:100%;display:flex}.playlist-header{color:#fff;background:#ee7203;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;font-size:1.2rem;font-weight:700;display:flex}.playlist-close{color:#fff;background:0 0;border-radius:6px;align-items:center;padding:4px;display:flex}.playlist-close:hover{background:#fff3}.songlist{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.songlist li{border-bottom:1px solid #e0d9d0;align-items:baseline;gap:10px;padding:8px 20px;display:flex}.songlist li:nth-child(odd){background:#f2ede7}.song-rank{text-align:right;font-variant-numeric:tabular-nums;color:#ee7203;flex-shrink:0;min-width:1.6em;font-weight:700}.song-info{flex-direction:column;min-width:0;display:flex}.song-artist{color:#8a8580;overflow-wrap:break-word;font-size:.9rem}.song-title{color:#3a3733;overflow-wrap:break-word;font-weight:600}@media (width>=1050px){.playlist-backdrop{display:none}.playlist{width:0;height:100vh;box-shadow:none;visibility:visible;border-left-width:0;flex-shrink:0;align-self:flex-start;transition:width .25s,border-left-width .25s;position:sticky;top:0;right:auto;overflow:hidden}.playlist.expanded{border-left-width:4px;width:300px}.playlist-toggle.expanded{right:360px}}.sommersonntag-layout{align-items:flex-start;display:flex}.sommersonntag-main{flex:1;min-width:0}.grid-scroll-wrapper{overflow-x:auto}.bingokarte-name-row{z-index:10;background:#fafafa;border-bottom:2px solid #e0d9d0;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:4px;margin-bottom:16px;display:flex;position:sticky;top:0}.bingokarte-name{appearance:none;letter-spacing:.01em;color:#8a8580;cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;border-radius:0;align-items:center;gap:8px;margin:0 0 -2px;padding:10px 14px;font-size:1.5rem;font-weight:600;transition:background-color .15s,color .15s,border-color .15s;display:flex;position:relative}.bingokarte-name:hover{color:#8e4301;background:#ee720314}.bingokarte-name .punkte{font-variant-numeric:tabular-nums;color:#a39d94;font-size:.85rem;font-weight:700}.bingokarte-name.selected{color:#ee7203;border-bottom:4px solid #ee7203}.bingokarte-name.selected .punkte{color:#ee7203}.bingokarte-name .candidate-badge{color:#fff;text-align:center;background:#7ac897;border-radius:50%;width:15px;height:15px;font-size:10px;font-weight:800;line-height:15px;animation:1.6s ease-in-out infinite candidate-pulse;position:absolute;top:2px;right:2px}@media (prefers-reduced-motion:reduce){.bingokarte-name .candidate-badge{animation:none}}@keyframes candidate-pulse{0%,to{box-shadow:0 0 #7ac8978c}50%{box-shadow:0 0 0 5px #7ac89700}}.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-wrap;overflow-wrap:break-word}@media (width>=1050px){.bingokarte-name{padding:12px 20px}}.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}.statistics button.selected{background:#8e4301}.statistics{margin-bottom: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 .form-check label{align-items:center;gap:8px;display:flex}.login .form-check input{width:auto;margin-top:0}.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;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-right{align-items:center;gap:16px;display:flex}.header .header-user-info{justify-content:space-between;align-items:center;gap:16px;display:flex}.header .help-button{color:#fff;align-items:center;gap:6px;font-weight:600;text-decoration:none;display:flex}.header .help-icon{width:24px;height:24px}.header .help-button:hover{opacity:.85}.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 .help-text,.header .user-info{display:none}.header .header-user-info{display:block}}@media (width>=1050px){.header{width:100%}}.hilfe h3{color:#ee7203;margin-top:32px}.hilfe h4{margin-top:20px;margin-bottom:4px}.hilfe ul{padding-left:20px}.hilfe li{margin-bottom:8px}.hilfe a{color:#ee7203;font-weight:600}