/* Display-Inhalt: Seiten, Steuerung, Auswahl im Kreis, Listen als Karten */

/* Display-Inhalt (AMOLED, schwarz) ------------------------------------------- */
.scr {
  position: absolute;
  inset: 0;
  padding: 8cqw 8cqw 7cqw;
  display: flex;
  flex-direction: column;
  gap: 2.6cqh;
  font-family: var(--font-ui);
  color: var(--scr-fg);
  font-variant-numeric: tabular-nums;
}
.s-top { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; font-size: 6.2cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scr-dim); }
.s-room { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-chip { flex: 0 0 auto; white-space: nowrap; padding: 0.05em 0.6em; border: 1px solid var(--scr-edge); border-radius: 99px; font-size: 5.4cqw; letter-spacing: 0.06em; color: var(--scr-fg); }
.s-chip.tv { border-color: var(--vol); color: var(--vol); }
.s-chip.mic { border-color: var(--led-mic); color: var(--led-mic); }
.s-chip.dev { border-color: var(--scr-dim); max-width: 60cqw; overflow: hidden; text-overflow: ellipsis; }
.s-chip.col::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.35em; vertical-align: -0.06em; border-radius: 50%;
  background: conic-gradient(hsl(0 90% 58%), hsl(60 90% 55%), hsl(120 80% 50%), hsl(180 85% 50%), hsl(240 85% 62%), hsl(300 85% 58%), hsl(360 90% 58%)); }
.s-hint { flex: 0 0 auto; font-size: 5.6cqw; color: var(--scr-dim); white-space: nowrap; }
.s-big.sm { font-size: min(19cqw, 18cqh); }
.s-color { gap: 5cqw; }
.s-main.s-color { flex-direction: column; justify-content: center; gap: 2.4cqw; }
.s-wheel { position: relative; flex: 0 0 auto; width: min(58cqw, 41cqh); aspect-ratio: 1; }
.s-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(hsl(0 90% 58%), hsl(60 90% 55%), hsl(120 80% 50%), hsl(180 85% 50%), hsl(240 85% 62%), hsl(300 85% 58%), hsl(360 90% 58%));
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%); }
.s-swatch { position: absolute; inset: 27%; border-radius: 50%; }
.s-mark { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%;
  border: 0.7cqw solid var(--scr-fg); background: var(--scr-bg); transform: rotate(var(--h)) translateY(-263%); }
.s-disc {
  position: relative; flex: 0 0 auto; width: min(66cqw, 46cqh); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0)),
    conic-gradient(hsl(0 90% 58%), hsl(60 90% 55%), hsl(120 80% 50%), hsl(180 85% 50%), hsl(240 85% 62%), hsl(300 85% 58%), hsl(360 90% 58%));
  box-shadow: 0 0 0 0.5cqw var(--scr-line);
}
.s-disc.enter { animation: discIn 0.22s cubic-bezier(0.22, 0.8, 0.24, 1); }
@keyframes discIn { from { transform: scale(0.86); opacity: 0.3; } }
.s-pmark { position: absolute; width: 9cqw; aspect-ratio: 1; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; border: 0.9cqw solid #fff; box-shadow: 0 0 0 0.45cqw rgba(0, 0, 0, 0.55); pointer-events: none; }
.s-cname { display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; font-size: 7.6cqw; font-weight: 500; line-height: 1.1; text-align: center; }
.s-cname small { font-size: 4.6cqw; font-weight: 400; color: var(--scr-dim); }
/* Seitenmodell: Raum, Punkte und Hinweise liegen fest, der Inhalt blättert darunter */
.scr-ind { position: absolute; inset: 0; z-index: 3; padding: 8cqw 8cqw 7cqw; pointer-events: none; font-family: var(--font-ui); color: var(--scr-fg); font-variant-numeric: tabular-nums; }
.screen.paged .scr { padding-top: calc(8cqw + 10.5cqw); padding-bottom: calc(7cqw + 6cqw); }
.scr-out { z-index: 1; pointer-events: none; }
.s-ftitle { font-size: 5.2cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--scr-dim); margin-top: -1.2cqh; }
.pdots { position: absolute; left: 0; right: 0; bottom: 6.5cqw; display: flex; justify-content: center; gap: 2.4cqw; }
.pdots i { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--scr-line); }
.pdots i.on { background: var(--scr-fg); }
.in-n-y { animation: inNy 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.in-p-y { animation: inPy 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.in-n-x { animation: inNx 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.in-p-x { animation: inPx 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.out-n-y { animation: outNy 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.out-p-y { animation: outPy 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.out-n-x { animation: outNx 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.out-p-x { animation: outPx 0.3s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
@keyframes inNy { from { transform: translateY(100%); } to { transform: none; } }
@keyframes inPy { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes inNx { from { transform: translateX(100%); } to { transform: none; } }
@keyframes inPx { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes outNy { to { transform: translateY(-100%); } }
@keyframes outPy { to { transform: translateY(100%); } }
@keyframes outNx { to { transform: translateX(-100%); } }
@keyframes outPx { to { transform: translateX(100%); } }
.bump-x-n { animation: bumpXn 0.26s ease-out; } .bump-x-p { animation: bumpXp 0.26s ease-out; }
.bump-y-n { animation: bumpYn 0.26s ease-out; } .bump-y-p { animation: bumpYp 0.26s ease-out; }
@keyframes bumpXn { 40% { transform: translateX(-5%); } } @keyframes bumpXp { 40% { transform: translateX(5%); } }
@keyframes bumpYn { 40% { transform: translateY(-4%); } } @keyframes bumpYp { 40% { transform: translateY(4%); } }
.s-sub span:first-child { min-width: 0; hyphens: manual; -webkit-hyphens: manual; }
.vdots { position: absolute; right: 2.6cqw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; }
.vdots i { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; border: 1px solid var(--scr-dim); }
.vdots i.all { border-radius: 0.5cqw; }
.vdots i.dev { border-radius: 0.3cqw; transform: rotate(45deg) scale(0.85); }
.vdots i.tv { width: 2.8cqw; height: 2cqw; border-radius: 0.4cqw; }
.vdots i.on { background: var(--scr-fg); border-color: var(--scr-fg); }
.s-ct.off { opacity: 0.35; }
/* Fernseher, Seite Steuerung: vier große Tippzonen um die Mitte, Ein/Aus klein in der Ecke */
.s-pad { position: relative; flex: 0 0 auto; width: min(56cqw, 38cqh); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; border: 1px solid var(--scr-line); }
.s-pad > i { position: absolute; width: 7cqw; height: 7cqw; border: solid var(--scr-dim); border-width: 0.9cqw 0.9cqw 0 0; }
.s-pad > i.u { left: 50%; top: 11%; transform: translate(-50%, 0) rotate(-45deg); }
.s-pad > i.r { right: 11%; top: 50%; transform: translate(0, -50%) rotate(45deg); }
.s-pad > i.d { left: 50%; bottom: 11%; transform: translate(-50%, 0) rotate(135deg); }
.s-pad > i.l { left: 11%; top: 50%; transform: translate(0, -50%) rotate(-135deg); }
.s-pad > i.hit { border-color: var(--scr-fg); }
.s-padc { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--scr-line); font-size: 5.4cqw; font-weight: 600; text-align: center; line-height: 1.1; overflow: hidden; }
/* Ein/Aus unter dem Kreuz: rund 6 mm hoch, damit es sich sicher treffen lässt */
.s-pow { flex: 0 0 auto; height: 16cqw; padding: 0 6cqw 0 4.5cqw; display: inline-flex; align-items: center; gap: 2.4cqw; border: 1px solid var(--scr-line); border-radius: 99px; background: none; color: var(--scr-fg); font: 600 5.6cqw var(--font-ui); cursor: pointer; }
.s-pow svg { width: 7.4cqw; height: 7.4cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.s-main.s-steuer { flex-direction: column; justify-content: center; gap: 4cqw; }
/* Rollladen, Seite Steuerung: drei große Tasten untereinander */
.s-main.s-rcs { flex-direction: column; align-items: stretch; justify-content: center; gap: 2.4cqw; }
.s-rc { flex: 0 1 19cqw; min-height: 0; display: flex; align-items: center; gap: 3.6cqw; padding: 0 4.5cqw; border: 1px solid var(--scr-line); border-radius: 2.6cqw;
  background: none; color: var(--scr-fg); font: inherit; font-size: 7.4cqw; font-weight: 600; text-align: left; cursor: pointer; }
.s-rc.sel { background: var(--scr-fg); border-color: var(--scr-fg); color: var(--scr-bg); }
.s-rc svg { flex: 0 0 auto; width: 7.4cqw; height: 7.4cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-rcx { margin-left: auto; font-size: 4.6cqw; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.72; }
/* Auswahl im Kreis: eine Umdrehung der Lünette ist einmal rundherum */
.s-circ { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.s-orbit { position: relative; width: min(86cqw, 66cqh); aspect-ratio: 1; }
.s-orbit::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--scr-line); }
.s-orbit > i { position: absolute; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%; border: 1px solid var(--scr-dim); background: var(--scr-bg); transition: transform 0.12s; }
.s-orbit > i.lit { background: var(--c, var(--scr-dim)); border-color: var(--c, var(--scr-dim)); }
.s-orbit > i.sel { transform: scale(1.75); border: 0.7cqw solid var(--scr-fg); }
.s-center { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; text-align: center; }
.s-cn { font-size: 8.6cqw; font-weight: 600; line-height: 1.08; hyphens: manual; -webkit-hyphens: manual; }
.s-cn.long { font-size: 7.4cqw; }
.s-ci { font-size: 5cqw; line-height: 1.25; color: var(--scr-dim); }
.s-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.8cqh; }
/* Listen als Karten: vier Einträge füllen die Fläche, weniger stehen mittig (wie die Etagen) */
.s-cards { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; }
.s-card {
  flex: 0 0 calc((100% - 6.6cqw) / 4); min-height: 0; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 3cqw; row-gap: 0.8cqw;
  padding: 0 4.5cqw; border: 1px solid var(--scr-line); border-radius: 2.6cqw; color: var(--scr-fg); cursor: pointer;
}
.s-card.sel { background: var(--scr-fg); border-color: var(--scr-fg); color: var(--scr-bg); }
.s-cn2 { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7.4cqw; font-weight: 600; line-height: 1.12; }
.s-ci2 { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 4.8cqw; line-height: 1.2; color: var(--scr-dim); }
.s-card.sel .s-ci2 { color: inherit; opacity: 0.72; }
.s-card.long .s-cn2 { font-size: 5.8cqw; line-height: 1.12; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; hyphens: manual; -webkit-hyphens: manual; }
.s-lsub { flex: 0 0 auto; margin-top: -1.4cqh; font-size: 5.6cqw; font-weight: 500; color: var(--scr-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-card .s-dot2 { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 3.4cqw; height: 3.4cqw; }
.s-cards.one .s-card { grid-template-columns: minmax(0, 1fr) auto; }
.s-ldots { flex: 0 0 auto; display: flex; justify-content: center; gap: 2.4cqw; margin-top: -0.6cqh; }
.s-ldots i { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--scr-line); }
.s-ldots i.on { background: var(--scr-fg); }
.s-empty { flex: 1 1 auto; display: grid; place-items: center; text-align: center; padding: 0 6cqw; font-size: 5.6cqw; color: var(--scr-dim); }
.s-cards.one .s-cn2 { font-size: 6.6cqw; }
.s-cards.one .s-ci2 { grid-column: 2; grid-row: 1; font-size: 4.6cqw; text-transform: uppercase; letter-spacing: 0.08em; }
.s-floor { display: flex; flex-direction: column; gap: 0.5cqh; padding: 2cqh 4.5cqw; border: 1px solid var(--scr-line); border-radius: 2.6cqw; color: var(--scr-dim); }
.s-floor.sel { background: var(--scr-fg); border-color: var(--scr-fg); color: var(--scr-bg); }
.s-fn { font-size: 8cqw; font-weight: 600; line-height: 1.1; hyphens: manual; -webkit-hyphens: manual; }
.s-fi { font-size: 4.8cqw; }
.s-ct2 { font-size: 4.4cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scr-fg); }
.s-sub { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; font-size: 7cqw; font-weight: 500; }
.dots { display: flex; gap: 2.2cqw; }
.dots i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1px solid var(--scr-dim); }
.dots i.all { border-radius: 0.6cqw; }
.dots i.on { background: var(--scr-fg); border-color: var(--scr-fg); }
.dots i.dev { border-radius: 0.4cqw; transform: rotate(45deg) scale(0.8); }
.s-main { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.s-val { display: flex; align-items: baseline; gap: 1.6cqw; }
.s-big { font-size: min(31cqw, 25cqh); font-weight: 500; line-height: 0.9; letter-spacing: -0.02em; }
.s-unit { font-size: 9cqw; color: var(--scr-dim); }
.s-ctls { display: flex; flex-direction: column; gap: 3.6cqw; }
.s-ctl { display: flex; flex-direction: column; gap: 1.8cqw; }
.s-lbl { display: flex; justify-content: space-between; gap: 3cqw; font-size: 5cqw; color: var(--scr-dim); white-space: nowrap; }
.s-lbl b { font-weight: 500; color: var(--scr-fg); }
.s-lbl.wrap { white-space: normal; }
.s-lbl.flash, .s-lbl.flash b { color: var(--led-mic); }
.s-bar { height: 3.2cqw; border-radius: 99px; background: var(--scr-line); overflow: hidden; }
.s-bar.thin { height: 1.7cqw; }
.s-bar i { display: block; height: 100%; border-radius: inherit; }
.s-ct { position: relative; height: 1.7cqw; border-radius: 99px; background: linear-gradient(90deg, rgb(255, 170, 90), rgb(255, 226, 190), rgb(214, 229, 255)); }
.s-ct i { position: absolute; top: 50%; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: var(--scr-bg); border: 0.8cqw solid var(--scr-fg); transform: translate(-50%, -50%); }
.s-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.9cqh; }
.s-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2cqw; padding: 1.5cqh 3cqw; border-radius: 2.6cqw; font-size: 7.6cqw; color: var(--scr-dim); }
.s-row.sel { background: var(--scr-fg); color: var(--scr-bg); }
.s-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tag { font-size: 4.8cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.s-why { grid-column: 1 / -1; font-size: 5cqw; opacity: 0.72; }
.s-row.dev { grid-template-columns: auto minmax(0, 1fr) auto; }
.s-row.dev .s-tag { font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 5.4cqw; }
.s-dot2 { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1px solid currentColor; opacity: 0.6; }
.s-dot2.lit { background: var(--c, currentColor); border-color: var(--c, currentColor); opacity: 1; }
.s-voice { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; }
.s-small { font-size: 6.4cqw; color: var(--scr-dim); }
.s-dot { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--led-mic); }
.wave { display: flex; align-items: center; gap: 2.2cqw; height: 20cqw; }
.wave i { width: 3cqw; height: 30%; border-radius: 99px; background: var(--led-mic); animation: wave 0.9s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -0.2s; }
.wave i:nth-child(3) { animation-delay: -0.45s; }
.wave i:nth-child(4) { animation-delay: -0.1s; }
.wave i:nth-child(5) { animation-delay: -0.6s; }
@keyframes wave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.s-quote { flex: 1 1 auto; display: flex; align-items: center; font-size: 10.5cqw; line-height: 1.12; font-weight: 500; }
.s-quote.small { flex: 0 0 auto; font-size: 6.4cqw; color: var(--scr-dim); }
.s-answer { flex: 1 1 auto; font-size: 7.2cqw; line-height: 1.28; }
.toast {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  top: 5cqw;
  padding: 2.6cqw 3cqw;
  border-radius: 3cqw;
  background: var(--scr-toast);
  color: var(--scr-fg);
  font-family: var(--font-ui);
  font-size: 6.6cqw;
  font-weight: 500;
  text-align: center;
  animation: toast 1.5s ease forwards;
}
@keyframes toast { 0% { opacity: 0; transform: translateY(4px); } 12%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; } }