/* ---- Basis / Bühne -------------------------------------------------- */
:root{
  --bg:#0d1117;
  --card:#161b22;
  --line:#2a323d;
  --txt:#e6edf3;
  --muted:#8b949e;
  --accent:#3fb950;      /* leise / gut */
  --loud:#f0883e;        /* laut */
  --brand:#58a6ff;
}

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

html,body{
  width:100%; height:100%;
  background:#05070a;
  overflow:hidden;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  color:var(--txt);
}

/* Viewport füllt das Fenster, Stage bleibt exakt 1920x1080 und wird skaliert */
#viewport{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}

#stage{
  position:relative;
  width:1920px;
  height:1080px;
  flex:0 0 auto;
  transform-origin:center center;
  background:var(--bg);
  overflow:hidden;
  padding:60px 80px;
  display:flex;
  flex-direction:column;
}

/* ---- Kopf ------------------------------------------------------------ */
.head{ margin-bottom:44px; }
.eyebrow{
  font-size:20px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brand); margin-bottom:14px;
}
.title{ font-size:76px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.sub{ font-size:24px; color:var(--muted); margin-top:16px; }

/* ---- Raster ---------------------------------------------------------- */
.grid{
  flex:1;
  min-height:0;                       /* verhindert Überlaufen des Flex-Kinds */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:28px;
}

/* Pin-Kachel: rechte Spalte, volle Höhe */
.card-pin{
  grid-column:4;
  grid-row:1 / span 2;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 30px;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  will-change:transform,opacity;
}
.card h2{
  font-size:20px; font-weight:600; color:var(--muted);
  letter-spacing:.04em; margin-bottom:20px;
}
.hint{ font-size:16px; color:var(--muted); margin-top:auto; padding-top:14px; }

/* ---- Buttons --------------------------------------------------------- */
.btn{
  margin-top:16px; align-self:flex-start;
  background:transparent; color:var(--txt);
  border:1px solid var(--line); border-radius:9px;
  padding:9px 18px; font-size:16px; font-family:inherit;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.btn:hover{ border-color:var(--brand); background:rgba(88,166,255,.08); }
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#03101f; font-weight:600;
  padding:13px 28px; font-size:18px; margin-top:0;
}
.btn-primary:hover{ background:#79b8ff; }

/* ---- 1 Counter ------------------------------------------------------- */
.metric{ display:flex; align-items:baseline; gap:10px; }
.num{
  font-size:96px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.unit{ font-size:28px; color:var(--muted); }

/* ---- 2 Balken -------------------------------------------------------- */
.bars{ display:flex; flex-direction:column; gap:22px; }
.bar-row{ display:grid; grid-template-columns:100px 1fr 74px; align-items:center; gap:14px; }
.bar-label{ font-size:16px; color:var(--muted); }
.bar-track{ height:20px; background:#0d1117; border-radius:10px; overflow:hidden; }
.bar{ height:100%; width:0; border-radius:10px; transform-origin:left center; }
.bar-loud{ background:linear-gradient(90deg,#d9822b,var(--loud)); }
.bar-quiet{ background:linear-gradient(90deg,#2ea043,var(--accent)); }
.bar-val{ font-size:20px; font-variant-numeric:tabular-nums; text-align:right; }

/* ---- 3 Wellen -------------------------------------------------------- */
.wave-svg{ width:100%; height:auto; max-height:210px; }
.wave{ fill:none; stroke:var(--loud); stroke-width:2.5; opacity:0; }
#source{ fill:var(--loud); }
#wallRect{ fill:var(--brand); transform-origin:50% 100%; transform-box:fill-box; }

/* ---- 4 Pfad ---------------------------------------------------------- */
.path-svg{ width:100%; height:auto; max-height:210px; }
#drawPath{ stroke:var(--brand); }
#pathDot{ fill:var(--accent); opacity:0; }

/* ---- 5 Text ---------------------------------------------------------- */
.reveal{ font-size:24px; line-height:1.45; }

/* ---- 6 Kacheln ------------------------------------------------------- */
.tiles{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.tiles i{
  display:block; aspect-ratio:1/1; border-radius:6px;
  background:var(--brand);
}

/* ---- 0 Pin + Iso-Wellen ----------------------------------------------
   .pin-point ist der ANKER: sein Ursprung (0,0) ist die Standfläche des Pins.
   Die Komponente (js/pin.js) hängt ihr SVG selbst daran auf. */
.pin-stage{
  position:relative;
  flex:1;
  min-height:0;
}
/* nur die Laborkachel – NICHT global, sonst überschreibt top das bottom
   des Pin-Ankers im Pin-Menü */
.pin-stage > .pin-point{
  position:absolute;
  left:50%;
  top:52%;
  width:0; height:0;
}

.hint code{
  font-family:ui-monospace,Menlo,monospace;
  background:#0d1117; padding:2px 6px; border-radius:4px; color:var(--brand);
}

.controls{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.controls label{
  display:grid; grid-template-columns:60px 1fr 56px;
  align-items:center; gap:10px;
  font-size:15px; color:var(--muted);
}
.controls input[type=range]{ width:100%; accent-color:var(--brand); }
.controls output{
  font-size:15px; color:var(--txt); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---- Fuß ------------------------------------------------------------- */
.foot{ margin-top:32px; display:flex; align-items:center; gap:20px; }
.status{ font-size:16px; color:var(--muted); }