/* Blobbel Volley – schlichter, freundlicher Look */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0f1d33; color: #fff; font-family: "Trebuchet MS", Arial, sans-serif; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#feld { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #7fc8f8; }
.versteckt { display: none !important; }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 400px); max-height: 96vh; overflow: auto; background: rgba(15, 29, 51, .93); border: 3px solid #ffb02e; border-radius: 18px; padding: 16px; text-align: center; z-index: 5; }
h1 { margin: 0; color: #ffb02e; font-size: 32px; letter-spacing: 1px; } h2 { margin: 0 0 8px; color: #ffb02e; }
.unter { margin: 0 0 12px; color: #bfe3ff; }
label { display: block; margin-bottom: 8px; text-align: left; } .haken { font-size: 14px; } .haken input { width: auto; }
input { width: 100%; font: inherit; font-size: 17px; padding: 7px; border-radius: 8px; border: 2px solid #3d6fa8; background: #08111f; color: #fff; }
button { font: inherit; font-size: 17px; font-weight: bold; padding: 9px; margin: 3px 0; width: 100%; border: 0; border-radius: 10px; background: #ffb02e; color: #0f1d33; cursor: pointer; box-shadow: 0 4px 0 #b36f00; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b36f00; }
.zeile { display: flex; gap: 6px; } .zeile input { text-transform: uppercase; letter-spacing: 4px; } .zeile button { width: auto; }
.oder { margin: 10px 0 4px; color: #bfe3ff; font-size: 14px; }
.fehler { color: #ff7b7b; min-height: 1em; margin: 4px 0; } .hilfe { color: #9fc3e6; font-size: 12px; }
.code { background: #000; color: #7dff8a; padding: 2px 10px; border-radius: 6px; letter-spacing: 6px; }
#meldung { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: bold; text-shadow: 0 2px 4px #000; pointer-events: none; z-index: 4; }
#touch button { position: absolute; bottom: 4vh; width: 18vmin; height: 18vmin; border-radius: 50%; font-size: 7vmin; opacity: .6; z-index: 3; padding: 0; }
#tL { left: 3vw; } #tR { left: calc(3vw + 20vmin); } #tJ { right: 4vw; width: 22vmin !important; height: 22vmin !important; }

/* Titelbild im Menü (Henner, 10.10.2026) */
.titelbild { display: block; margin: 0 auto 8px; }
.titelbild img { display: block; width: 100%; height: auto; max-height: 30vh; object-fit: contain; border-radius: 10px; }
.nurtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.liste { list-style: none; padding: 0; margin: 8px 0; } .liste li { margin: 3px 0; font-weight: bold; } .liste .gruen { color: #3fbf3f; } .liste .rot { color: #e04848; }
.ton { display: flex; gap: 10px; justify-content: center; font-size: 13px; margin: 6px 0; } .ton input { width: 90px; vertical-align: middle; }
.tonknopf { position: fixed; top: 8px; right: 8px; z-index: 20; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 40px; background: rgba(15,29,51,.75); border: 2px solid #ffb02e; }
.credit { margin: 8px 0 0; font-size: 12px; opacity: .85; } .credit a { color: inherit; }