/* Geraeterahmen fuer iPad und iPhone -- reines CSS, skalierbar.
   Proportionen angelehnt an iPad Pro und iPhone 17 Pro: duenner Rand,
   Titankante mit Lichtkante, Seitentasten, Dynamic Island bzw. Kamera. */

.geraet {
  --titan-hell: #5b5a57;
  --titan: #2e2e30;
  --titan-dunkel: #161617;
  position: relative;
  display: block;
  isolation: isolate;
}
.geraet .koerper {
  position: relative;
  padding: var(--rand);
  border-radius: var(--radius-aussen);
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .06)),
    #0b0b0c;
  box-shadow:
    0 0 0 1.5px var(--titan),
    0 0 0 3px var(--titan-dunkel),
    0 0 0 3.5px rgb(255 255 255 / .12),
    0 2px 0 3px rgb(255 255 255 / .05),
    0 60px 120px -40px rgb(0 0 0 / .95),
    0 30px 60px -30px rgb(0 0 0 / .8);
}
/* Lichtkante auf dem Titan */
.geraet .koerper::before {
  /* Kein calc() um den Radius: er ist ein Wertepaar mit "/", calc macht
     daraus einen ungueltigen Wert -- die Kante wurde eckig. */
  content: ""; position: absolute; inset: -3px; border-radius: var(--radius-aussen);
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, var(--titan-hell), var(--titan) 25%, var(--titan-dunkel) 50%, var(--titan) 75%, var(--titan-hell));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.geraet .schirm {
  position: relative; overflow: hidden;
  border-radius: var(--radius-innen);
  background: #000;
}
/* Seitenverhaeltnis je Geraet und Lage -- ein style-Attribut verwirft die
   Sicherheitsrichtlinie der Seite. */
.geraet.ipad.quer .schirm { aspect-ratio: 2420 / 1668; }
.geraet.ipad.hoch .schirm { aspect-ratio: 1668 / 2420; }
.geraet.iphone.hoch .schirm { aspect-ratio: 1206 / 2622; }
.geraet.iphone.quer .schirm { aspect-ratio: 2622 / 1206; }
.geraet .schirm img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease, transform 6s ease-out;
  transform: scale(1.025);
}
.geraet .schirm img.an { opacity: 1; transform: scale(1); }
/* Glanz ueber dem Glas, sehr zurueckhaltend */
.geraet .schirm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 38%);
}
.geraet .taste { position: absolute; background: linear-gradient(90deg, var(--titan-dunkel), var(--titan-hell), var(--titan-dunkel)); border-radius: 2px; }

/* iPad */
.geraet.ipad { --rand: 2.1%; --radius-aussen: 3.9% / 5.6%; --radius-innen: 2.3% / 3.3%; }
.geraet.ipad.hoch { --rand: 2.9%; --radius-aussen: 5.4% / 3.9%; --radius-innen: 3.2% / 2.3%; }
.geraet.ipad .kamera { position: absolute; z-index: 3; width: .55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a6a, #0a0a0c 70%); top: .95%; left: 50%; translate: -50% 0; }
.geraet.ipad.hoch .kamera { width: .8%; top: 1.05%; }
.geraet.ipad .taste.oben { top: -4px; right: 12%; width: 7%; height: 3px; }
.geraet.ipad .taste.laut1 { right: -4px; top: 9%; width: 3px; height: 6%; }
.geraet.ipad .taste.laut2 { right: -4px; top: 17%; width: 3px; height: 6%; }

/* iPhone */
.geraet.iphone { --rand: 3.4%; --radius-aussen: 17% / 7.9%; --radius-innen: 14% / 6.5%; }
.geraet.iphone.quer { --rand: 1.6%; --radius-aussen: 7.9% / 17%; --radius-innen: 6.5% / 14%; }
.geraet.iphone .insel { position: absolute; z-index: 3; background: #000; border-radius: 999px;
  width: 30%; height: 3.3%; top: 2.6%; left: 50%; translate: -50% 0; }
.geraet.iphone.quer .insel { width: 3.3%; height: 30%; top: 50%; left: 2.6%; translate: 0 -50%; }
.geraet.iphone .taste.aktion { left: -4px; top: 17%; width: 3px; height: 3.5%; }
.geraet.iphone .taste.laut1 { left: -4px; top: 23%; width: 3px; height: 6%; }
.geraet.iphone .taste.laut2 { left: -4px; top: 31%; width: 3px; height: 6%; }
.geraet.iphone .taste.seite { right: -4px; top: 25%; width: 3px; height: 9%; }
.geraet.iphone.quer .taste.aktion { top: -4px; left: 17%; width: 3.5%; height: 3px; }
.geraet.iphone.quer .taste.laut1 { top: -4px; left: 23%; width: 6%; height: 3px; }
.geraet.iphone.quer .taste.laut2 { top: -4px; left: 31%; width: 6%; height: 3px; }
.geraet.iphone.quer .taste.seite { top: auto; bottom: -4px; right: auto; left: 25%; width: 9%; height: 3px; }

/* Schweben -- langsam und kaum merklich */
@media (prefers-reduced-motion: no-preference) {
  .schwebt { animation: schweben 9s ease-in-out infinite; }
  .schwebt.versetzt { animation-delay: -4.5s; }
  @keyframes schweben { 50% { translate: 0 -8px; } }
}
@media (prefers-reduced-motion: reduce) {
  .geraet .schirm img { transition: none; transform: none; }
}

/* Umschalter im Stil der App: dunkle Kachel, feine Kante, Symbol statt Wort */
.steuerpult { display: inline-flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 16px; background: rgb(19 19 22 / .8); border: 1px solid var(--kante);
  backdrop-filter: blur(10px); }
.steuerpult button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 11px;
  background: transparent; color: var(--staub); cursor: pointer; transition: background .2s, color .2s; }
.steuerpult button:hover { color: var(--elfenbein); }
.steuerpult button[aria-pressed="true"] { background: var(--kachel-hell); color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--kante-hell); }
.steuerpult button:disabled { opacity: .3; cursor: default; }
.steuerpult svg { width: 22px; height: 22px; }
.steuerpult .trenner { width: 1px; height: 26px; background: var(--kante); margin-inline: 2px; }

/* Reiter fuer Bildschirme im Geraet (Schichten) */
.reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.reiter button { font: 500 .98rem/1 var(--breit); color: var(--staub); background: transparent;
  border: 1px solid var(--kante); border-radius: 999px; padding: 11px 16px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; transition: color .2s, border-color .2s, background .2s; }
.reiter button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.reiter button[aria-selected="true"] { color: var(--elfenbein); border-color: var(--signal-dunkel); background: rgb(225 204 79 / .08); }
.reiter button[aria-selected="true"]::before { background: var(--signal); opacity: 1; }

/* Instrumentenreihe: Kacheln klein nebeneinander */
.instrumente { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.instrument { margin: 0; }
.instrument .kachel-bild { border-radius: 18px; overflow: hidden; border: 1px solid var(--kante);
  box-shadow: 0 30px 50px -35px rgb(0 0 0 / .9); aspect-ratio: 555 / 560; background: var(--kachel); }
.instrument .kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instrument.breit { grid-column: span 2; }
.instrument.breit .kachel-bild { aspect-ratio: 1141 / 567; }
.instrument .kachel-bild .lage-live { border: 0; border-radius: 0; height: 100%; aspect-ratio: auto; }
.instrument figcaption { margin-top: 14px; }
.instrument h3 { font: 600 1.25rem/1.15 var(--schmal); margin: 0 0 4px; }
.instrument p { color: var(--staub); font-size: .96rem; line-height: 1.45; margin: 0; }
@media (max-width: 900px) {
  .instrumente { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-bottom: 12px;
    /* Wischstreifen bis an den Bildschirmrand, erste Kachel aber buendig mit dem Text. */
    margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
  .instrument { scroll-snap-align: start; }
}