/* =============================================================================
   style.css — Graph von Kapitel 7, freigestellt
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700&display=swap');

:root {
  /* Grund der Graph-Ansicht, siehe GRUND_RGB in daten.js */
  --grund: #E2E6E1;
  --ink: #1A1A1A;
  /* Tinte der Beschriftungen, siehe LABEL_TINTE in daten.js */
  --label: #212B2E;
  --sans: 'Source Sans 3', -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Auf schmalen Bildschirmen ist die Leinwand breiter als das Fenster und
   scrollt seitlich, siehe richteLeinwandEin() in graph.js. */
.buehne {
  position: fixed;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.buehne canvas {
  display: block;
}

.play-button {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Beschriftung über dem Knopf. Absolut positioniert, sonst schöbe sie als
   Flex-Element das Play-Zeichen aus der Mitte. Wortlaut setzt graph.js. */
.play-button::before {
  content: var(--play-label, 'Ton an');
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--label);
  pointer-events: none;
}

.play-button:hover {
  background: #333;
}

.play-button:focus-visible {
  outline: 2px solid var(--label);
  outline-offset: 3px;
}