/* Rahmen der Seite: Kopf, zwei Hälften, Fuß. Das Innere der Hälften gehört sap.css (links) und szene.js (rechts). */
@font-face { font-family: Manrope; src: url(vendor/fonts/manrope-latin.woff2) format('woff2'); font-weight: 200 800; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url(vendor/fonts/manrope-latin-ext.woff2) format('woff2'); font-weight: 200 800; font-display: block; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #eef2f7; --weiss: #ffffff; --tinte: #0f1b2d; --text: #26344a; --grau: #66758a; --linie: #dde4ee;
  --blau: #1b66f5; --tuerkis: #14a0a5; --gruen: #12c08e; --rot: #d9412b; --gelb: #f2b61b;
  --kopf: 60px; --fuss: 34px; --rand: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: Manrope, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.45; overflow: hidden; }

.kopf { height: var(--kopf); display: flex; align-items: center; gap: 18px; padding: 0 var(--rand); }
.kopf h1 { margin: 0; color: var(--tinte); font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.kopf p { margin: 0; color: var(--grau); font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf button { font: inherit; font-size: 14px; font-weight: 700; color: var(--tinte); background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.kopf button:hover { border-color: var(--blau); color: var(--blau); }

.flaeche { height: calc(100dvh - var(--kopf) - var(--fuss)); display: grid; grid-template-columns: minmax(560px, 46%) minmax(0, 1fr); gap: var(--rand); padding: 0 var(--rand); }
.links { min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.rechts { min-width: 0; min-height: 0; position: relative; overflow: hidden; border-radius: 16px; background: #e6edf6; border: 1px solid var(--linie); }
#leinwand { display: block; width: 100%; height: 100%; touch-action: none; }
#etiketten { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hinweise { position: absolute; left: 16px; right: 16px; bottom: 16px; pointer-events: none; }
.fehlt { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--grau); font-size: 15px; }

.fuss { height: var(--fuss); display: flex; align-items: center; padding: 0 var(--rand); color: var(--grau); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Schmal (Handy, Hochformat): 3D oben, Maske darunter, die Seite scrollt. */
@media (max-width: 960px) {
  body { overflow: auto; }
  .kopf { height: auto; flex-wrap: wrap; gap: 4px 12px; padding: 12px var(--rand); }
  .kopf p { flex-basis: 100%; order: 3; white-space: normal; }
  .kopf h1 { flex: 1; }
  .flaeche { height: auto; grid-template-columns: minmax(0, 1fr); }
  .rechts { order: -1; height: 56dvh; min-height: 340px; }
  .links { height: auto; min-height: 480px; overflow: visible; }
  .fuss { height: auto; white-space: normal; padding: 12px var(--rand) 20px; }
}