/* ============================================================================
   Seitenmenü – verbindet die drei Screens (Einleitung / Hörbeispiele / Simulation)
   ----------------------------------------------------------------------------
   Klebt zentriert am rechten Bühnenrand. Zwei Zustände aus dem Artwork:
     media/ui_side-menu_closed.svg  – nur Griff + Farbstreifen, Chevron sichtbar
     media/ui_side-menu_open.svg    – Panel mit drei Kacheln aufgezogen

   Alle Maße stammen 1:1 aus ui_side-menu_open.svg (viewBox 0 0 184 408). Der
   Inhalt liegt darin bei y 30..378 (Höhe 348) und mit der rechten Kante des
   Farbstreifens bei x=154. Diese Kante klebt an der Bühnenkante.

   NUR HTML/CSS – SVG steckt bloß in den Icons (media/icn/icn_select_*) und im
   Chevron. Der ganze Streifen, der Griff (Schraffur) und die Kacheln sind CSS,
   das Aufziehen ist eine Verschiebung (js/sidemenu.js).
   ========================================================================== */

.side{
  position:absolute;
  right:0;
  top:50%;
  /* transform-origin rechts: der Farbstreifen bleibt beim Skalieren an der
     Bühnenkante kleben. --side-scale skaliert das ganze Menü in einem Zug. */
  transform:translateY(-50%) scale(var(--side-scale, 1.3));
  transform-origin:right center;
  height:348px;
  font-family:"Swiss721","Helvetica Neue",Arial,sans-serif;
  z-index:40;
}

/* ---- Farbstreifen (bleibt immer stehen) ---------------------------------
   Vier gleich hohe Segmente in den DEGES-Hausfarben, rechte Kante = Bühnenrand. */
.side__strip{
  position:absolute;
  right:0; top:0;
  width:8px; height:100%;
  display:flex; flex-direction:column;
  /* Liegt ÜBER dem verschiebbaren Teil: beim Schließen fährt das Panel unter
     dem Streifen hindurch, der Streifen bleibt an der Bühnenkante sichtbar. */
  z-index:3;
  pointer-events:none;
}
.side__strip > i{ flex:1; display:block; }

/* ---- Verschiebbarer Teil: Panel + Kacheln + Griff -----------------------
   Wird zum Schließen um SIDE.slideX nach rechts aus dem Bild geschoben; nur der
   Griff bleibt dann links vom Streifen sichtbar. */
.side__slider{ position:absolute; inset:0; }

/* Panel: heller Kasten hinter den Kacheln, links abgerundet, rechts bündig. */
.side__panel{
  position:absolute;
  right:0; top:0;
  width:124px; height:100%;
  background:#f2f2f2;
  border-radius:12px 0 0 12px;
  box-shadow:-8px 0 24px rgba(3,20,42,.18);
  overflow:hidden;             /* schneidet die Kacheln ab, wenn geschoben */
}

/* ---- Kacheln ------------------------------------------------------------- */
.side__cards{ position:absolute; inset:0; }

.side__item{
  position:absolute;
  left:10px;
  width:96px; height:96px;
  border-radius:12px;
  background:#fff;
  color:#0a325f;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(3,20,42,.08);
  transition:background .2s ease;
}
/* Aktiver Screen: gleiche Farbe wie in den anderen Menüs (--ui-tile-active). */
.side__item.is-active{ background:#c4e5f4; }
.side__item:not(.is-active):hover{ background:#eaf5fc; }

.side__icon{
  width:44px; height:44px;
  display:block;
  /* die select-Icons sind einfarbig marineblau angelegt */
  pointer-events:none;
}
.side__label{
  font-size:10px; font-weight:700; letter-spacing:.02em;
  line-height:1; text-align:center;
  pointer-events:none;
}

/* ---- Griff / „Fahne" (anfassbar & ziehbar) ------------------------------
   Der Aufbau folgt media/ui_side-menu_closed.svg:
     · Fahne = graue Fläche (#f2f2f2), links abgerundet, sitzt an der linken
       Panelkante und wird mitgeschoben.
     · Schraffur (Punktraster) eingerückt in der Fahne – MIT Abstand zum Rand,
       geht also nicht bis an die Kante.
     · Schraffur endet rund 1/3 vor der Unterkante an einem Trennstrich.
     · Chevron im unteren Drittel, nur im geschlossenen Zustand.
   Breiter als im Artwork (44 statt 36), damit man sie besser greifen kann.
   Höhe/Positionen 1:1 aus dem Artwork (Fahne y42..164, also top 12, Höhe 122). */
.side__handle{
  position:absolute;
  top:12px;
  right:124px;                 /* rechte Kante am linken Panelrand */
  width:44px; height:122px;
  background-color:#f2f2f2;
  border-radius:12px 0 0 12px;
  box-shadow:-6px 0 18px rgba(3,20,42,.14);
  cursor:pointer;
  /* Ziehen: keine Textauswahl, kein Scroll-Abfangen durch den Browser. */
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.side__handle:active{ background-color:#ededed; }

/* Schraffur: Punktraster (4px-Gitter, 2px-Punkt) aus dem Artwork. Eingerückt:
   4px oben, 5px links (sichtbare Außenkante), rechts bündig an die Panelnaht. */
.side__hatch{
  position:absolute;
  top:4px; left:5px; right:0;
  height:79px;                 /* wird beim Öffnen auf volle Höhe gezogen */
  background-color:#f2f2f2;
  background-image:radial-gradient(#d3d3d3 40%, transparent 42%);
  background-size:4px 4px;
  background-position:2px 2px;
  border-radius:8px 0 0 8px;
  pointer-events:none;
}

/* Fuß: Trennstrich (Oberkante) + Chevron, im unteren Drittel. Blendet beim
   Öffnen komplett aus. */
.side__foot{
  position:absolute;
  left:0; right:0; bottom:0;
  height:39px;
  border-top:1px solid #ccc;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.side__chevron{
  width:13px; height:22px;
  color:#0a325f;
}