/* RecordsRemote – Handy-App (c) 2026 RecordsRadio.de */
:root { --hinten: #090012; --karte: #1a0828; --rand: #3b1a52; --text: #ffffff; --leise: #c9b6dc; --pink: #ff008c; --pink2: #ff4db3; --blau: #0066ff; --gruen: #16a34a; --rot: #dc2626; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--hinten); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; font-size: 17px; }
body { background: radial-gradient(700px 500px at 100% -10%, rgba(255,0,140,.35), transparent 60%), radial-gradient(600px 500px at -10% 110%, rgba(0,102,255,.30), transparent 60%), linear-gradient(160deg, #2a003f, #090012 70%); background-attachment: fixed; }
#app { min-height: 100%; }
.seite { display: none; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.seite.an { display: block; }
.kopf { text-align: center; padding: 14px 0 6px; }
.logo { font-weight: 900; letter-spacing: 5px; font-size: 26px; }
.logo span { color: var(--pink2); }
.unter { color: var(--leise); font-size: 14px; margin-top: 4px; }
.karte { background: rgba(26,8,40,.88); border: 1px solid var(--rand); border-radius: 20px; padding: 18px; margin: 14px 0; }
.karte.mitte { text-align: center; margin-top: 18vh; }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 10px; }
label { display: block; font-size: 14px; color: var(--leise); margin: 12px 0 5px; }
label.haken { display: flex; gap: 8px; align-items: center; color: var(--text); }
input { width: 100%; font-size: 20px; padding: 13px 14px; border-radius: 14px; border: 2px solid var(--rand); background: #0f0518; color: var(--text); outline: none; }
input:focus { border-color: var(--pink); }
input[type=checkbox] { width: 22px; height: 22px; }
button { font: inherit; cursor: pointer; border: 0; color: #fff; }
button.gross { width: 100%; margin-top: 16px; padding: 15px; font-size: 19px; font-weight: 800; border-radius: 16px; background: linear-gradient(135deg, var(--pink), #9333ea); box-shadow: 0 8px 24px rgba(255,0,140,.35); }
button.zweit { width: 100%; margin-top: 10px; padding: 12px; font-size: 16px; font-weight: 700; border-radius: 14px; background: #2b1340; border: 1px solid var(--rand); }
button.zurueck { width: 100%; margin-top: 14px; padding: 10px; background: transparent; color: var(--leise); }
button:disabled { opacity: .5; }
.knopflink { display: block; text-align: center; margin-top: 12px; color: var(--pink2); }
a { color: var(--pink2); }
hr { border: 0; border-top: 1px solid var(--rand); margin: 18px 0; }
.leise { color: var(--leise); }
.klein { font-size: 14px; line-height: 1.55; }
.status { margin-top: 12px; min-height: 1.4em; font-weight: 700; color: var(--pink2); }
.status.ok { color: #4ade80; }
.liste button { display: flex; justify-content: space-between; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 14px; background: #2b1340; border: 1px solid var(--rand); }
.liste small { color: var(--leise); }
.code { font-size: 46px; font-weight: 900; letter-spacing: 6px; margin: 10px 0; color: #fff; text-shadow: 0 0 24px rgba(255,0,140,.6); }
/* ── Sitzung ── */
.seite.sitzung { padding: 0; max-width: none; height: 100%; position: fixed; inset: 0; background: #000; }
.leiste { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; gap: 6px; align-items: center; padding: max(6px, env(safe-area-inset-top)) 8px 6px; background: rgba(9,0,18,.92); border-bottom: 1px solid var(--rand); overflow-x: auto; }
.leiste button { flex: 0 0 auto; min-width: 46px; height: 42px; border-radius: 12px; background: #2b1340; font-size: 18px; padding: 0 10px; }
.leiste button.an { background: var(--pink); }
.leiste button.rot { background: var(--rot); }
.leiste .info { font-size: 12px; color: var(--leise); white-space: nowrap; margin-left: 4px; }
#chatZahl { font-size: 12px; margin-left: 2px; color: var(--pink2); }
.buehne { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; touch-action: none; }
#bild { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: auto; }
.zeiger { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid var(--pink); border-radius: 50%; pointer-events: none; z-index: 3; transition: opacity .4s; }
.tipp { position: absolute; left: -2000px; top: 50%; width: 10px; height: 10px; opacity: 0; font-size: 16px; }
.hinweis { position: absolute; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12; background: rgba(26,8,40,.95); border: 1px solid var(--pink); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.menue { position: absolute; top: 58px; left: 8px; right: 8px; z-index: 7; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 10px; background: rgba(26,8,40,.97); border: 1px solid var(--rand); border-radius: 16px; max-height: 60vh; overflow: auto; }
.menue button { padding: 11px 6px; border-radius: 12px; background: #2b1340; font-size: 15px; }
.chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; height: 55%; display: flex; flex-direction: column; background: rgba(15,5,24,.97); border-top: 2px solid var(--pink); padding-bottom: env(safe-area-inset-bottom); }
.chatkopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.chatkopf button { background: transparent; font-size: 20px; }
.chatverlauf { flex: 1; overflow-y: auto; padding: 0 14px; font-size: 16px; }
.chatverlauf p { margin: 6px 0; padding: 8px 12px; border-radius: 14px; background: #2b1340; max-width: 85%; }
.chatverlauf p.ich { background: var(--pink); margin-left: auto; }
.chatverlauf small { display: block; font-size: 11px; color: var(--leise); }
.chatverlauf p.ich small { color: #ffe1f1; }
.chatzeile { display: flex; gap: 8px; padding: 10px 14px; }
.chatzeile button { width: 54px; border-radius: 14px; background: var(--pink); font-size: 20px; }
.dialog { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog[hidden] { display: none; }
.dialogbox { background: var(--karte); border: 2px solid var(--pink); border-radius: 20px; padding: 20px; max-width: 480px; width: 100%; }
.dialogbox h2 { margin-top: 0; }
.ausweis { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 1px; background: #0f0518; padding: 10px; border-radius: 10px; text-align: center; margin: 10px 0; }
[hidden] { display: none !important; }

/* ab 1.2 */
.liste .eintrag { display: flex; gap: 6px; align-items: stretch; }
.liste .eintrag .wahl { flex: 1; }
.liste button.wahl { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 14px; background: #2b1340; border: 1px solid var(--rand); }
.liste button.mini { margin-top: 8px; width: 52px; border-radius: 14px; background: #2b1340; border: 1px solid var(--rand); }
.liste small { color: var(--leise); }
.dialogbox label { margin-top: 10px; }
.dialogbox .zweit { margin-top: 12px; }