/* Seitenpadding */
.page{
  padding: 24px;
  margin: 0 auto;
}

/* Wiederverwendbarer Frame */
.frame{
  border: 2px solid var(--line);
  background: var(--panel);
  padding: 14px 16px;
  border-radius: 40px;
  background: var(--bg2);
}

/* Buttons (hud-buttons, exit-btn) als ein System */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--panel3);

  padding: 8px 12px;
  text-decoration: none;
  text-transform: uppercase;

  font-size: 15px;
  cursor: pointer;
  border-radius: 15px;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, font-size 140ms ease;
}

.btn:hover{
  border-color: var(--fg);
  background: var(--panel);
  transform: translateY(-1px);
  color: var(--fg);
  text-shadow:
    0 0 6px rgba(21,255,0,0.7),
    0 0 14px rgba(21,255,0,0.5),
    0 0 28px rgba(21,255,0,0.3); 
}

/* Helper: Scrollbar verstecken */
.scroll-hide{
  scrollbar-width: none;
}
.scroll-hide::-webkit-scrollbar{ width: 0px; height: 0px; }

/* Viewer/CV Grid Basis */
.two-col{
  height: 100vh;
  padding: 24px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(300px, 520px) minmax(700px, 1fr);
  gap: 16px;

  overflow: hidden;
}