/* cyberSID 64 – Oberfläche. Drei Designs über Farbwerte: Neon (Standard, body.neon), C64-Blau (ohne Klasse) und Cyber-Nacht (body.cyber). */
:root {
  --bg: #2a2168; --panel: #352a86; --panel2: #2f257a; --line: #6a5cd6; --text: #cfc8ff; --dim: #8f86d6;
  --accent: #5ff2ff; --accent2: #ff5fd2; --cursor: #bfce72; --warn: #ffb454;
  --row4: rgba(255, 255, 255, 0.045); --row16: rgba(95, 242, 255, 0.10);
  --play: rgba(255, 95, 210, 0.28); --sel: rgba(95, 242, 255, 0.22); --glow: 0 0 6px rgba(95, 242, 255, 0.55);
  --note: #e8e3ff; --ins: #7ee0ff; --fx: #ffb3ea; --empty: #6f65b8;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
body.cyber {
  --bg: #07070f; --panel: #0f1024; --panel2: #0b0c1c; --line: #262b5c; --text: #cdd6ff; --dim: #6b73a8;
  --accent: #3ef2ff; --accent2: #ff3ea5; --cursor: #f4ff3e;
  --row4: rgba(62, 242, 255, 0.035); --row16: rgba(255, 62, 165, 0.08);
  --play: rgba(255, 62, 165, 0.25); --sel: rgba(62, 242, 255, 0.18); --glow: 0 0 8px rgba(62, 242, 255, 0.8);
  --note: #e6ecff; --ins: #3ef2ff; --fx: #ff6ec0; --empty: #333a70;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
@supports (height: 100dvh) { body { height: 100dvh; } } /* iPhone/iPad: Safari-Leisten verdecken nichts */
body {
  margin: 0; background: var(--bg); color: var(--text); font-size: 14px;
  display: grid; grid-template-rows: auto auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); overflow: hidden;
}
/* Neon: fast schwarzer, leicht violetter Grund, knallige Neonfarben mit kräftigem Leuchten. */
body.neon {
  --bg: #05010c; --panel: #0e0420; --panel2: #090216; --line: #4a1a7a; --text: #f3e9ff; --dim: #9d80cc;
  --accent: #00f0ff; --accent2: #ff2bd6; --cursor: #f5ff00; --warn: #ffb000;
  --row4: rgba(0, 240, 255, 0.04); --row16: rgba(255, 43, 214, 0.12);
  --play: rgba(255, 43, 214, 0.32); --sel: rgba(0, 240, 255, 0.22);
  --glow: 0 0 8px rgba(0, 240, 255, 0.9), 0 0 20px rgba(255, 43, 214, 0.45);
  --note: #ffffff; --ins: #00f0ff; --fx: #ff2bd6; --empty: #3b2466;
}
body.neon .brand {
  background: linear-gradient(90deg, #00f0ff, #ff2bd6 55%, #f5ff00); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.75));
}
body.neon header, body.neon footer { border-color: var(--accent2); box-shadow: 0 0 14px rgba(255, 43, 214, 0.35); }
body.neon button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
body.neon .row:nth-child(16n+1) .rn { color: var(--cursor); text-shadow: 0 0 6px var(--cursor); }
body.neon .cur { box-shadow: 0 0 10px var(--cursor); }
body.neon .tabs button.active { color: var(--cursor); box-shadow: inset 0 -2px 0 var(--cursor); text-shadow: 0 0 6px var(--cursor); }
body.cyber::after, body.neon::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); padding: 3px 9px; white-space: nowrap; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.on { background: var(--line); color: #fff; border-color: var(--accent); box-shadow: var(--glow); }
button.play { color: var(--accent); }
button.active { background: var(--accent2); color: #fff; }
input[type=range] { accent-color: var(--accent); padding: 0; }
.spacer { flex: 1; }
label { color: var(--dim); display: inline-flex; gap: 5px; align-items: center; }
.num { width: 4.6em; text-align: center; }
.hex1 { width: 2.2em; text-align: center; }

/* Kopfleiste */
header { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 2px solid var(--line); background: var(--panel2); }
header .grp { display: flex; gap: 5px; align-items: center; }
header .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.brand { font-weight: 700; letter-spacing: 0.1em; color: var(--accent); text-shadow: var(--glow); font-size: 18px; white-space: nowrap; }
.title { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; min-width: 3em; flex-shrink: 1; }
.title b { color: var(--text); font-weight: 400; }
body.edit #btnEdit { background: var(--accent2); color: #fff; border-color: var(--accent2); }

/* Ablauf-Leiste */
.order { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.order .positions { display: flex; gap: 4px; overflow-x: auto; max-width: 40vw; min-width: 7em; }
.order .pos { padding: 2px 7px; color: var(--dim); }
.order .pos b { color: var(--text); font-weight: 400; }
.order .pos.cur { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.order .pos.playing { background: var(--play); }
.order .pos.loop::before { content: "↻ "; color: var(--accent2); }
.lbl { color: var(--dim); }

main { display: grid; grid-template-columns: minmax(0, 1fr) 430px; min-height: 0; }

/* Pattern-Editor */
.pattern { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-right: 2px solid var(--line); }
.voices, .row { display: grid; grid-template-columns: 62px repeat(3, 1fr); }
.voices { background: var(--panel2); border-bottom: 1px solid var(--line); }
.voices > div { padding: 5px 10px; display: flex; gap: 8px; align-items: center; border-left: 1px solid var(--line); white-space: nowrap; }
.voices > div:first-child { padding: 5px 6px; border-left: none; font-size: 12px; justify-content: flex-end; }
.voices .vh { cursor: pointer; user-select: none; }
.voices .vh.muted { opacity: 0.45; }
.voices .meter { flex: 1; height: 6px; background: var(--panel); border: 1px solid var(--line); position: relative; }
.voices .meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.rows { overflow-y: auto; font-size: 16px; line-height: 1.45; user-select: none; cursor: default; }
.row .rn { color: var(--dim); text-align: right; padding-right: 8px; }
.row .c { padding: 0 10px; border-left: 1px solid var(--line); white-space: pre; letter-spacing: 0.03em; }
.row:nth-child(4n+1) { background: var(--row4); }
.row:nth-child(16n+1) { background: var(--row16); }
.row:nth-child(16n+1) .rn { color: var(--accent); }
.row.playing { background: var(--play); }
.row.currow .rn { color: var(--cursor); }
.row .c.sel { background: var(--sel); }
.n { color: var(--note); } .i { color: var(--ins); } .f { color: var(--fx); } .e { color: var(--empty); }
.cur { outline: 2px solid var(--cursor); background: rgba(191, 206, 114, 0.18); }
body.edit .cur { outline-color: var(--accent2); background: rgba(255, 95, 210, 0.25); }

/* Seitenleiste */
aside { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; background: var(--panel); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { border: none; border-right: 1px solid var(--line); background: transparent; padding: 7px 14px; color: var(--dim); }
.tabs button.active { color: var(--accent); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--accent); }
.side { overflow-y: auto; padding: 10px 12px; display: grid; gap: 9px; align-content: start; }
.side[hidden] { display: none; }
.inslist { border: 1px solid var(--line); height: 150px; overflow-y: auto; background: var(--panel2); }
.inslist div { padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.inslist div span { color: var(--dim); margin-right: 8px; }
.inslist div.empty { color: var(--empty); }
.inslist .sel { background: var(--line); color: #fff; }
h3 { margin: 4px 0 0; font-size: 12px; letter-spacing: 0.15em; color: var(--dim); font-weight: 400; text-transform: uppercase; }
.line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.env { height: 90px; border: 1px solid var(--line); background: var(--panel2); display: block; width: 100%; touch-action: none; cursor: crosshair; }
.hex4 { display: flex; gap: 10px; }
.wt { border: 1px solid var(--line); background: var(--panel2); }
.wt .wr { display: grid; grid-template-columns: 2.6em 5.5em 5.5em 2em; gap: 4px; padding: 2px 6px; align-items: center; }
.wt .wr.hd { color: var(--dim); border-bottom: 1px solid var(--line); }
.wt .wr.loop { box-shadow: inset 3px 0 0 var(--accent2); }
.wt input { width: 100%; padding: 1px 4px; }
.wt button { padding: 0 4px; }
.scope { height: 56px; width: 100%; display: block; background: var(--panel2); border-bottom: 1px solid var(--line); }
.hint.warn { color: var(--warn); }
.hint.warn:empty { display: none; }
.cutlive .bar { flex: 1; height: 8px; background: var(--panel2); border: 1px solid var(--line); position: relative; }
.cutlive .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.cutlive #cutLiveV { min-width: 3em; text-align: right; }
.filterlist { border: 1px solid var(--line); background: var(--panel2); }
.filterlist .fr { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 2px 6px; cursor: pointer; }
.filterlist .fr:hover { background: var(--row16); }
.filterlist .nr { color: var(--dim); }
.filterlist .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterlist .fr:not(.on) .t { color: var(--dim); }
.filterlist .t small { display: block; color: var(--dim); font-size: 11px; }
.filterlist button { padding: 0 6px; font-size: 12px; }
.filterlist .hint { margin: 0; padding: 6px; }
.hint { color: var(--dim); font-size: 12px; }

/* Fußzeile */
footer { display: flex; gap: 16px; padding: 5px 12px; border-top: 2px solid var(--line); background: var(--panel2); color: var(--dim); font-size: 13px; white-space: nowrap; }
footer #status { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
footer #status.warn { color: var(--warn); }
footer .audio { font-size: 12px; padding: 0 8px; color: var(--dim); border-color: var(--line); background: transparent; }
footer .audio.off { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); font-weight: 700; }

/* Menüs und Hilfe */
.menu[hidden] { display: none; }
.menu { position: fixed; z-index: 20; background: var(--panel2); border: 1px solid var(--accent); box-shadow: var(--glow); display: grid; min-width: 14em; }
.menu button { border: none; text-align: left; padding: 6px 12px; background: transparent; }
.menu button:hover { background: var(--line); color: #fff; }
.menu hr { border: none; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; }
.overlay[hidden] { display: none; }
.dialog { background: var(--panel); border: 2px solid var(--accent); box-shadow: var(--glow); max-width: min(760px, calc(100vw - 16px)); max-height: 85vh; overflow-y: auto; padding: 16px 22px; }
.dialog h2 { margin-top: 0; color: var(--accent); letter-spacing: 0.1em; font-size: 16px; }
.dialog table { border-collapse: collapse; width: 100%; }
.dialog td { padding: 3px 10px 3px 0; vertical-align: top; }
.dialog td:first-child { color: var(--accent); white-space: nowrap; }
.dialog a { color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; border-color: var(--line); }
input:disabled { opacity: 0.45; cursor: default; }
.line.inactive .lbl, .line.inactive label { opacity: 0.45; }
#pwHint:empty { display: none; }

/* Preset-Browser */
.dialog.presets { width: 560px; display: grid; gap: 10px; }
.dialog.presets h2 { margin-bottom: 0; }
.presetlist { border: 1px solid var(--line); background: var(--panel2); height: 260px; overflow-y: auto; }
.presetlist div { padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.presetlist div:hover { background: var(--row16); }
.presetlist .sel { background: var(--line); color: #fff; }
.presethint { min-height: 2.6em; margin: 0; color: var(--text); }
.menu .demo small { color: var(--dim); margin-left: 8px; }
.menu button small { color: var(--dim); float: right; margin-left: 16px; }

/* Speicherstand, Links, Meine Songs */
.savestate { color: var(--dim); font-size: 12px; white-space: nowrap; border: 1px solid var(--line); padding: 1px 7px; cursor: default; }
.savestate.saved { color: var(--accent); border-color: var(--accent); }
.savestate.dirty { color: var(--warn); border-color: var(--warn); }
.dialog.links, .dialog.mysongs { width: 620px; display: grid; gap: 8px; }
.dialog.links p { margin: 4px 0 0; }
.dialog.links input { flex: 1; min-width: 0; }
.mysonglist { border: 1px solid var(--line); background: var(--panel2); max-height: 320px; overflow-y: auto; }
.mysong { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.mysong .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mysong .d { color: var(--dim); font-size: 12px; }
.mysonglist .hint { padding: 8px; margin: 0; }

/* Export */
.dialog.exportdlg { width: 560px; display: grid; gap: 8px; }
.dialog.exportdlg p { margin: 0; }
.progress { height: 10px; border: 1px solid var(--line); background: var(--panel2); position: relative; }
.progress[hidden] { display: none; }
.progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: var(--glow); }

/* Hilfe mit Reitern */
.dialog.helpdlg { width: 760px; height: 82vh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; }
.dialog.helpdlg h2 { margin: 0; }
.helptabs { flex-wrap: wrap; }
.helpbody { overflow-y: auto; padding-right: 8px; line-height: 1.5; }
.helpbody h3 { margin: 14px 0 4px; font-size: 13px; color: var(--accent); }
.helpbody h3:first-child { margin-top: 0; }
.helpbody p { margin: 6px 0; }
.helpbody ul, .helpbody ol { margin: 6px 0; padding-left: 22px; }
.helpbody li { margin: 4px 0; }
.helpbody code, .helpbody kbd { color: var(--cursor); }
.helpbody kbd { border: 1px solid var(--line); padding: 0 5px; background: var(--panel2); }
.helpbody .tip { border-left: 3px solid var(--accent2); padding: 4px 10px; background: var(--panel2); }
.helpbody table.keys td:first-child { color: var(--cursor); padding-right: 16px; }
.helpbody dl.fx dt { color: var(--accent); margin-top: 12px; }
.helpbody dl.fx dt code { font-weight: 700; }
.helpbody dl.fx dd { margin: 2px 0 0 18px; }
.helpbody .ex { display: block; color: var(--dim); margin-top: 2px; }
.celldemo { display: inline-block; font-size: 20px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel2); margin: 4px 0 8px; }
.celldemo .legend { display: flex; gap: 14px; font-size: 11px; color: var(--dim); margin-top: 4px; }

/* Erklärmodus */
body.explain [data-help] { outline: 1px dashed var(--accent); outline-offset: 1px; cursor: help; }
body.explain [data-help].explain-hover { outline: 2px solid var(--cursor); box-shadow: 0 0 10px var(--cursor); }
.explainbar { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--accent2); color: #fff;
  padding: 3px 6px 3px 12px; font-size: 12px; box-shadow: var(--glow); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.explainbar[hidden], .explaintip[hidden] { display: none; }
.explainbar button { padding: 0 8px; font-size: 12px; }
.explaintip { position: fixed; z-index: 60; max-width: 340px; background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--glow);
  padding: 8px 12px; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; }
.explaintip b { color: var(--accent); }
.explaintip .more { justify-self: start; padding: 1px 8px; font-size: 12px; margin-top: 4px; }
#btnExplain.on { background: var(--cursor); color: var(--bg); border-color: var(--cursor); }

/* Anmeldung: Ohne Anmeldung liegt die App nur weichgezeichnet im Hintergrund und ist nicht bedienbar
   (dazu inert in index.html, das auch Tabulator und Vorlesefunktion fernhält). */
body.locked > header, body.locked > nav, body.locked > main, body.locked > .pad, body.locked > footer { filter: blur(5px); pointer-events: none; user-select: none; }
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(255, 43, 214, 0.18), transparent 60%), radial-gradient(ellipse at 50% 90%, rgba(0, 240, 255, 0.12), transparent 60%),
  color-mix(in srgb, var(--bg) 55%, transparent); }
.gate[hidden] { display: none; }
.gatebox { width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--glow); padding: 24px 28px; display: grid; gap: 10px; }
.gatebrand { font-size: 30px; text-align: center; }
.gatesub { text-align: center; color: var(--dim); margin: -6px 0 6px; }
.gatebox form { display: grid; gap: 10px; }
.gatebox form[hidden] { display: none; }
.gatebox h2 { margin: 4px 0 0; color: var(--accent); letter-spacing: 0.1em; font-size: 15px; }
.gatebox label { display: grid; gap: 4px; }
.gatebox input { width: 100%; padding: 6px 8px; }
.gatebox button[type=submit] { justify-self: start; padding: 5px 16px; }
.gatebox .hint { margin: 0; }
.gateerror { color: var(--warn); margin: 0; min-height: 1.2em; }
.gatelinks { text-align: center; margin: 4px 0 0; font-size: 12px; }
.gatelinks a { color: var(--dim); }

/* Konto im Menü und Benutzerverwaltung */
.menuuser { padding: 6px 12px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.menuuser b { color: var(--text); font-weight: 400; }
.dialog.usersdlg { width: 680px; display: grid; gap: 8px; }
.dialog.usersdlg form { margin: 0; }
.linkbox { border: 1px solid var(--accent2); padding: 8px; display: grid; gap: 6px; }
.linkbox[hidden] { display: none; }
.linkbox .hint { margin: 0; }
.userlist { border: 1px solid var(--line); background: var(--panel2); max-height: 280px; overflow-y: auto; }
.urow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; row-gap: 0; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.urow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow .t small { color: var(--accent2); margin-left: 6px; }
.urow .d { color: var(--dim); font-size: 12px; grid-column: 1; grid-row: 2; } /* unter der E-Mail, damit sie Platz hat */
.urow > button, .urow > span:empty { grid-row: 1 / span 2; }
.urow.off .t { color: var(--dim); }
button.danger { color: var(--warn); }
.dialog.passworddlg { width: 420px; display: grid; gap: 8px; }
.passworddlg label { display: grid; gap: 4px; }
.passworddlg input:not([hidden]) { width: 100%; }

/* Schmalere Bildschirme (iPad, kleine Fenster, iPhone): Nichts ragt über den Rand. Der Desktop ab 1320 px bleibt unverändert. */
footer #status { min-width: 0; }
@media (max-width: 1319px) {
  header { gap: 5px; padding: 7px 8px; }
  header button { padding: 3px 5px; }
  header .sep { margin: 0 2px; }
  .title { max-width: 10em; min-width: 0; } /* schrumpft bei Platzmangel, notfalls ganz */
  .order { gap: 5px; padding: 6px 8px; }
}
@media (max-width: 1179px) {
  header { gap: 4px; }
  .brand { letter-spacing: 0.04em; }
  .title { max-width: 6em; }
}
@media (max-width: 899px) {
  main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  .pattern { border-right: none; border-bottom: 2px solid var(--line); }
  header, .order { flex-wrap: wrap; row-gap: 6px; }
  .order .positions { max-width: none; flex: 1 1 100%; order: -1; }
  #posInfo { display: none; }
}
@media (max-width: 599px) {
  .voices, .row { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); }
  .voices > div { padding: 4px 5px; gap: 4px; font-size: 12px; }
  .voices .meter { display: none; }
  .rows { font-size: 13px; }
  .row .rn { padding-right: 3px; }
  .row .c { padding: 0 3px; overflow: hidden; }
  .brand { font-size: 16px; }
  .title, .order .lbl { display: none; }
}

/* Tastenfeld unten: Bearbeiten-Knöpfe, Klaviatur über zwei Oktaven bzw. Hex-Tasten, Oktave und Löschen */
.pad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; border-top: 2px solid var(--line); background: var(--panel2); }
.pad[hidden] { display: none; }
.padedit { display: grid; grid-template-columns: repeat(5, auto); gap: 5px; align-content: center; }
.padside { display: grid; grid-template-columns: auto auto auto; gap: 5px; align-content: center; align-items: center; }
.padside #padOct { text-align: center; color: var(--dim); min-width: 4em; }
.padside #padNoteOff, .padside [data-pad="clear"] { grid-column: span 3; }
.padkeys { min-width: 0; }
.piano { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); height: 96px; touch-action: none; }
.piano[hidden], .hexpad[hidden], #padNoteOff[hidden] { display: none; }
.piano .w { border: 1px solid var(--bg); background: var(--text); border-radius: 0 0 4px 4px; display: flex; align-items: flex-end; justify-content: center; grid-row: 1; }
.piano .w small { color: var(--bg); font-size: 11px; padding-bottom: 4px; }
.piano .b { position: absolute; top: 0; height: 58%; width: calc(100% / 14 * 0.6); left: calc(100% / 14 * var(--at) - 100% / 14 * 0.3);
  background: var(--bg); border: 1px solid var(--line); border-top: none; border-radius: 0 0 3px 3px; z-index: 1; }
.piano .down { background: var(--accent); box-shadow: var(--glow); }
.piano .off { opacity: 0.3; }
.hexpad { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; height: 96px; }
.hexpad button { font-size: 18px; }
footer .audio.on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 899px) {
  .pad { grid-template-columns: minmax(0, 1fr) auto; }
  .padkeys { grid-column: 1 / -1; order: -1; }
  .padedit { grid-template-columns: repeat(5, minmax(0, auto)); }
}

/* Hinweis auf Touch-Geräten: iPad im Hochformat bitte drehen; auf dem iPhone nur Anhören und Verwalten.
   cyberSID 64 ist fürs Querformat gebaut. Schließen merkt sich die Wahl (body.orient-ok). */
.orienthint { display: none; position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 45; width: max-content;
  max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--accent2); box-shadow: var(--glow);
  padding: 6px 8px 6px 12px; gap: 10px; align-items: center; font-size: 13px; line-height: 1.35; }
.orienthint .oh-tablet, .orienthint .oh-phone { display: none; }
@media (pointer: coarse) and (orientation: portrait) and (min-width: 600px) {
  body:not(.orient-ok) .orienthint { display: flex; }
  .orienthint .oh-tablet { display: inline; }
}
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 499px) {
  body:not(.orient-ok) .orienthint { display: flex; }
  .orienthint .oh-phone { display: inline; }
}

/* Ziehen und Halten (Hüllkurve, Test-Knopf, Blockauswahl) ohne Scrollen, Markieren oder Kontextmenü. */
.env, #insTest { touch-action: none; }
.rows, .voices, .env, #insTest, .pad { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-only { display: none; }

/* Touch-Geräte (iPad, iPhone): größere Tippflächen. Am Rechner mit Maus gilt nichts davon. */
@media (pointer: coarse) {
  html { touch-action: manipulation; } /* kein Zoom per Doppeltipp, wenn man schnell hintereinander tippt */
  /* Langes Drücken zeigt auf dem iPad sonst Lupe und Markierung – nur Eingabefelder bleiben markierbar. */
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  input, select, textarea { font-size: 16px; } /* sonst zoomt iOS beim Antippen hinein */
  button, select, input:not([type=range]):not([type=checkbox]) { min-height: 36px; }
  input[type=range] { height: 36px; }
  .tabs button { padding: 10px 16px; }
  .inslist { height: 190px; }
  .inslist div, .presetlist div { padding-top: 7px; padding-bottom: 7px; }
  .menu button { padding: 11px 14px; }
  .voices > div { padding-top: 10px; padding-bottom: 10px; }
  .rows { line-height: 1.9; }
  .rows .row { pointer-events: none; } /* Berührungen landen auf #rows, siehe cellAt() in pattern-view.js */
  .rows.hit .row { pointer-events: auto; }
  .mouse-only { display: none; }
  .touch-only { display: inline; }
}